2

I have some thumbnails that I want to display text/dark transparency over on hover. The way they're set up, the HTML calls the image and the text block immediately below. CSS pulls the text block over the image and changes the opacity on hover.

This works fine in Chrome, Firefox, and Safari. However, on IE, it's keeping the text block immediately below the image.

Here is my HTML code. Please note that the shortcodes are functions I've created to pull the thumbnail images and text blocks from a database. Just consider them image and text elements.

Teambox calls out the image. Teamoverbox is the hover block. Teamtitleovertext is the actual text. Teamcontainer wraps the whole thing.

Here's the page source output. It's a grid of thumbnails, so I only grabbed one of them. 

<div class="teamcontainer">
<div class="teambox">
<a href="/?team-member=dennis-rosario"><img alt=""  class="attachment-full" src="/wp-content/uploads/2017/02/team_0006_dennis.jpg" />
<div class="teamoverbox"><div class="teamtitleovertext"> Dennis Rosario</div></div></a>
                </div>

Here is my CSS.

#teamgrid img {
 position: relative;
  top: 0;
    height: 150px;
width: 150px;
}

.teambox {
 position: relative;
z-index: 1;
  height: 150px;
width: 150px;
}

.teamoverbox {
height: 150px;
width: 150px;
position: relative;
z-index: 2;
  top: -150px;
text-align: center;
display: table-cell;
vertical-align: middle;
opacity: 0;
background: rgba(0,0,0,0.5);
    -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
transition: opacity 500ms;
  color: #fff;
  text-transform: uppercase;
}

.teamoverbox:hover {
opacity: 1;
}
user1814839
  • 41
  • 4
  • Would it be possible to paste in the HTML that is actually output on the browser, using Dev Tools or page source? Might be easier to replicate here for testing – Jack Koppa Mar 13 '17 at 19:30
  • @JackKoppa I updated the initial comment to use the page source rather than the template code. Thanks! – user1814839 Mar 13 '17 at 21:47
  • Nice. I was just testing on IE 9, and adding ` ` (which isn't assumed in older IE versions), seemed to at least be a start in helping with the problem (which you may even have in your actual code, but it wasn't working for me at all before adding that). If you've got it working with the new changes, definitely go with that. Feel free to post an updated code snippet as an answer, and mark as correct, if that solves your issue. – Jack Koppa Mar 13 '17 at 22:17
  • Solved it! I added a div around the image, then set both the image and text divs to absolute position with top:0 and left:0 so they essentially overlap each other. I had to set the text div to a matching width/height so I could vertically align. Tested and worked on IE. – user1814839 Mar 13 '17 at 22:24
  • Excellent - great to hear. – Jack Koppa Mar 13 '17 at 22:31

1 Answers1

1

Here's how it worked per above. There is a new div added around the image, then both the image and text divs are set to absolute position with top:0 and left:0.

To get the text to vertically align in these new positions, I also had to specify height and width.

Note that the content here is using a database function in shortcode.

<div class="teamcontainer"><center><div class="teambox"><a href="[wpv-post-url]">
<div class="teamimage">[types field='headshot-thumbnail' size='full' align='none'][/types]</div>
<div class="teamoverbox"><div class="teamtitleovertext"> [wpv-post-title]</div></div></a>
                    </div>
</div>

Here's the CSS

.teambox {
 position: relative;
z-index: 1;
  height: 150px;
width: 150px;
}

.teamimage {
 position: absolute;
  top: 0;
  left: 0;
}

.teamoverbox {
height: 150px;
width: 150px;
position: absolute;
z-index: 2;
  top: 0;
  left: 0;
  text-align: center;
display: table-cell;
vertical-align: middle;
opacity: 0;
background: rgba(0,0,0,0.5);
    -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
transition: opacity 500ms;
  color: #fff;
  text-transform: uppercase;
}

.teamoverbox:hover {
opacity: 1;
}

.teamtitle {
 font-weight: normal; 
}

.teamtitleovertext {
 display: table-cell;
  vertical-align: middle;
  text-align: center;
  height: 150px;
  width: 150px;
}
user1814839
  • 41
  • 4