Responsive hover on DIV

[mika]

Hi, folks.

I’m bulding a site with skeleton framework. On my “product page” I have one row of images for which i want to make simple hover background and short caption text. How do i make this work? My code woks fine for browser but when i resize my screen product DIVs don’t scale (like skeleton’s scale-with-grid class should work) and images go over one another a little bit.

Here’s my code so far:

Product row sample: (first div)

<div>
  <div>
    <img src="images/web_toiska.png" /> <span> Fade Caption <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </p></span>
  </div>
</div>

****** CSS ******

.box { cursor: pointer; height: 380px; float: left; margin: 5px; position: relative; overflow: hidden; width: 160px; }

box img { position: absolute; left: 0; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; }

.box .caption { background-color: #529fce; position: absolute; color: #fff; z-index: 100; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; left: 0; }

.box .fade-caption, #mainwrapper .box .scale-caption { opacity: 0; width: 160px; height: 380px; text-align: left; padding: 15px; }

.box:hover .fade-caption { opacity: 1; }

****** @media only screen and (min-width: 320px) and (max-width: 768px) *******

.box { max-width: 100%; height: auto; }

.box .fade-caption, #mainwrapper .box .scale-caption { max-width: 100%; height: auto; }

// Mika

[mika]

Here’s my code so far:

Product row sample: (first div)

<div class="three columns offset-by-two">
             <div id="webrefe" class="box">  
                <img src="images/web_toiska.png" class="scale-with-grid"/>  
                <span class="caption fade-caption">  
                <h3>Fade Caption</h3>  
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>  
                </span>  
             </div>
        </div>

[Paulie_D]

We’d need to see it in action…do you have a live link or perhaps you could put a version (with images) in Codepen?

Also, an idea of what this is supposed to look like would be useful (if you can’t do the above)

[Paulie_D]

Are you trying to so something like this: http://codepen.io/Paulie-D/pen/f66a765171c3d3980c825a7c089fc726

[mika]

Hi, Paulie.

Yes, just like that only more text on caption. My hover woks ok, but skeleton’s “scale with grid class” destroys my product image row.

/ Mika

[Paulie_D]

skeleton’s “scale with grid

I have no idea what that is…but I would presume that the image would have to be display:block first….but perhaps not.

As I said, we need to see it live so we can tinker with it.

[Author]

Posts