Forums

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

Home Forums CSS Tumblr : Show captions only on hover?

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #149667
    ohelle
    Participant

    Hi there,

    I am trying to achieve a simple hover action but I can’t seem to get it to work.

    As you can see on my tumblr http://www.ellekorhalillerweb.com I have worked out how to show captions on top of each photo post. However I would like these captions to appear only on hover. As you can see I am using javascript to fade to white on hover over the images and I would like the captions also to ease in on hover like this.

    Please see below my code that is relevant to this problem:

    #entry:hover .notecount{
    -moz-transition: all 0.3s ease-out; /* FF3.7+ /
    -o-transition: all 0.3s ease-out; / Opera 10.5 /
    -webkit-transition: all 0.3s ease-out; / Saf3.2+, Chrome /
    transition: all 0.3s ease-out;
    opacity:1 !important;
    background:url(‘http://static.tumblr.com/twte3d7/gpQlk3sfc/overlay.png’);
    }
    
    .notecount{
    background:url(‘http://static.tumblr.com/twte3d7/gpQlk3sfc/overlay.png’);
    -moz-transition: all 0.3s ease-out; / FF3.7+ /
    -o-transition: all 0.3s ease-out; / Opera 10.5 /
    -webkit-transition: all 0.3s ease-out; / Saf3.2+, Chrome */
    transition: all 0.3s ease-out;
    z-index:1000;
    font-size:30px;
    opacity:0;
    display:table;
    position:absolute;
    height:215px;
    overflow:hidden;
    width: 360px;
    }
    
    caption{
    width:360px;
    padding:65px 10px 10px;
    padding-left: 5%;
    vertical-align:text-top;
    position: absolute;
    color: white;
    font-size: 20px;
    }
    
    caption:hover {
    color: 000;
    font-size: 20px;
    display: block;
    }
    
    #149688
    Paulie_D
    Member
    #149726
    georgearnall
    Participant

    Previous link didn’t work, but I found it anyway :) http://ellekorhalillerweb.tumblr.com/

    It is difficult to work out exactly what is happening and you have a lot of repeated #ids. If you could I would recommend implementing @Paulie_D ‘s method for this as it works very well.

    #149731
    Paulie_D
    Member

    There is also this one which works pretty much in the same way but with a different HMTL structure.

    http://codepen.io/Paulie-D/pen/f66a765171c3d3980c825a7c089fc726

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