Streaming live at 10am (PST)

Hover state on div block


#1

Hi, Im trying to create a hover state for the thumbnails on this page http://robloxgamespage.webflow.com/ I was trying to put a div on the hover state but it seems to not allow it.
This is the example I want to have it look like - scroll down to now trending and roll over image. http://store.apple.com/us


#2

Neat, my son plays that game from time to time. I'm afraid you're going to have to use CSS psuedo classes which in webflow right now is done by using custom css in the head section. So the image is contained in a div, but so is the div containing the hidden content only revealed when the parent container is hovered.

So if we have a structure like this:

<div class="image-container">
  <img src="blahblahblah" />
  <div class="overlay">some overlay content</div>
</div>

Then something like this for custom css:

.overlay {
  display: none; /* can be set using normal webflow design tool, maybe set some transitions would be cool */
}
.image-container:hover .overlay {
  display: block; /* can't be set using design tool, but needed to reveal this child div when the parent is hovered */
}

#3