Trouble displaying Title on Hover THEME:SPUN

  • Resolved new013

    (@new013)


    11 years, 8 months ago

    Hello,

    I am new to word press and am using the SPUN theme. I am trying to get the post’s titles to display over the image (ideally on hover) that appear in the circles on the homepage. I created a child theme and then I changed the “content-home.php” to always display the post’s title (based on code suggested in the theme’s support forum). I then added a span and a class to it. I have tried a variety of positions/display types and have no been able to get the title over the image. It just sits under it ??

    Did I put the span in the correct position? Does anyone have any suggestions for how I could accomplish this?

    Here is my URL

    Thank you so much for your help! I truly do appreciate it!!

Viewing 16 replies (of 16 total)

  • k almost there LOL

    in a browser on a computer looks great! couldn’t be happier..

    but when in iphone or ipad the words are not centered so I added some stuff to my css. it’s probably more than necessary, but it works:

    below is my entire css that works in all devices:

    /*
Theme Name:     Spun Child
Theme URI:      https://example.com/
Description:    Child theme for the Twenty Twelve theme
Author:         Your name here
Author URI:     https://example.com/about/
Template:       spun
Version:        0.1.0
*/

@import url("../spun/style.css");

.blog .hentry span.hometitle {
 position: absolute;
 top: 70px;
 width: 100%;
   color: #FAFAFA;
    display: table-cell;
    font-family: Baskerville,"Playfair Display","Times New Roman",serif;
    font-size: 3.4rem;
    font-style: italic;
    height: 180px;
    line-height: 32px;
    overflow: hidden;
    text-align: center;
    transition: background 0.4s ease-in-out 0s;
    vertical-align: middle;
    width: 180px;
    word-wrap: break-word;
text-shadow: 1px 1px #6B6868;
}

.blog .hentry {
 position: relative;
}

@media screen and ( max-width: 800px ) {

	.blog .hentry span.hometitle {
 position: absolute;
 top: 50px;
 width: 100%;
   color: #FAFAFA;
    display: table-cell;
    font-family: Baskerville,"Playfair Display","Times New Roman",serif;
    font-size: 2.4rem;
    font-style: italic;
    height: 123px;
    line-height: 24px;
    overflow: hidden;
    text-align: center;
    transition: background 0.4s ease-in-out 0s;
    vertical-align: middle;
    width: 123px;
    word-wrap: break-word;
text-shadow: 1px 1px #6B6868;
}

}
@media screen and ( max-width: 600px ) {
	.blog .hentry span.hometitle {
 position: absolute;
 top: 56px;
 width: 100%;
   color: #FAFAFA;
    display: table-cell;
    font-family: Baskerville,"Playfair Display","Times New Roman",serif;
    font-size: 2.4rem;
    font-style: italic;
    height: 140px;
    line-height: 24px;
    overflow: hidden;
    text-align: center;
    transition: background 0.4s ease-in-out 0s;
    vertical-align: middle;
    width: 140px;
    word-wrap: break-word;
text-shadow: 1px 1px #6B6868;
}
Viewing 16 replies (of 16 total)
  • The topic ‘Trouble displaying Title on Hover THEME:SPUN’ is closed to new replies.