Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Responsive hover on DIV

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #150228
    mika
    Participant

    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

    #150229
    mika
    Participant

    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>
    
    #150240
    Paulie_D
    Member

    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)

    #150253
    Paulie_D
    Member

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

    #150254
    mika
    Participant

    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

    #150258
    Paulie_D
    Member

    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.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.