- This topic is empty.
-
AuthorPosts
-
September 10, 2013 at 1:22 pm #149667ohelleParticipant
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; }
September 11, 2013 at 12:03 am #149688Paulie_DMemberYou mean like this: http://codepen.io/Paulie-D/pen/2fb6dbdbae0a5bd8274a22ee152504e2
September 11, 2013 at 10:38 am #149726georgearnallParticipantPrevious 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.
September 11, 2013 at 10:43 am #149731Paulie_DMemberThere 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
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.