Home
Publications
0
Posted Sat Feb 22, 2014 1:01 am
![[Tutorial] Slide in Captions Ecrire3](https://2img.net/i/fa/optimisation_fdf/common/ecrire3.png) | Tutorial: Image Side in Caption |
--> Tutorials <--
Image Slide in Caption
Image Slide in Caption
1º - HTML
- Code:
<figure class="cap-left">
<img src="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-ash2/t1/263821_242664355752650_1680862_n.jpg" alt="">
<figcaption>
Social Academy
</figcaption>
</figure>
2º - CSS
- Code:
figure { display: block; position: relative; float: left; overflow: hidden; margin: 0 20px 20px 0; } figcaption { position: absolute; background: black; background: rgba(0,0,0,0.75); color: white; padding: 10px 20px; opacity: 0; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; } figure:hover figcaption { opacity: 1; } figure:before { content: "?"; position: absolute; font-weight: 800; background: black; background: rgba(255,255,255,0.75); text-shadow: 0 0 5px white; color: black; width: 24px; height: 24px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; text-align: center; font-size: 14px; line-height: 24px; -moz-transition: all 0.6s ease; opacity: 0.75; } figure:hover:before { opacity: 0; } .cap-left:before { bottom: 10px; left: 10px; } .cap-left figcaption { bottom: 0; left: -30%; } .cap-left:hover figcaption { left: 0; } .cap-right:before { bottom: 10px; right: 10px; } .cap-right figcaption { bottom: 0; right: -30%; } .cap-right:hover figcaption { right: 0; } .cap-top:before { top: 10px; left: 10px; } .cap-top figcaption { left: 0; top: -30%; } .cap-top:hover figcaption { top: 0; } .cap-bot:before { bottom: 10px; left: 10px; } .cap-bot figcaption { left: 0; bottom: -30%;} .cap-bot:hover figcaption { bottom: 0; }
- Preview?
Live Demo : [You must be registered and logged in to see this link.]
© Social Academy
![[Tutorial] Slide in Captions Act_bottom](https://www.forumeiros.com/i/img/act_bottom.png) | If you have any questions related to this topic create a topic with the following title: Image Slide in Caption |
Last edited by Joseph on Mon Apr 14, 2014 4:19 am; edited 1 time in total
![[Tutorial] Slide in Captions Vote_lcap](https://2img.net/i/fa/prosilver_grey/vote_lcap.png){kind=small}
![[Tutorial] Slide in Captions Voting_bar](https://2img.net/i/fa/prosilver_grey/voting_bar.png){kind=small}
![[Tutorial] Slide in Captions Vote_rcap](https://2img.net/i/fa/prosilver_grey/vote_rcap.png){kind=small}
