Webinnov'@EureAnimation n°2 : Transition & Transform

Animation n°2 : Transition & Transform

21 mars 2019 in Ateliers, CSS

Code HTML

XHTML

<section class="tmi_photo clearfix"> <div class="container"><img src="img/01.jpg" alt="" width="520" height="360"> <div class="photo-content"> <h3><a href="#" title="Fiche 1">Fiche Cuisine</a></h3> <ul> <li style="font-size:22px;padding-top:10px;"><span style="margin-left:-15px;color:#CCC;text-shadow: 2px 2px 1px rgba(63, 63, 63, 1);">Les ingrédients...</span></li> <li>....</li> </ul> <div class="link"><a title="La recette complète" href="#">Lire la suite...</a></div> <img style="position:absolute; left:350px; bottom:45px; opacity:1; border:solid thin f2e6e6;-moz-box-shadow: 0px 0px 5px 3px #ffffff;-webkit-box-shadow: 0px 0px 5px 3px #ffffff;-o-box-shadow: 0px 0px 5px 3px #ffffff;box-shadow: 0px 0px 5px 3px #ffffff;filter:progid:DXImageTransform.Microsoft.Shadow(color=#ffffff, Direction=NaN, Strength=5);;" src="img/menu.png" alt="chocolat" width="150" height="180"></div> </div> </section>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<section class="tmi_photo clearfix">

<div class="container"><img src="img/01.jpg" alt="" width="520" height="360">

<div class="photo-content">

<h3><a href="#" title="Fiche 1">Fiche Cuisine</a></h3>

<ul>

<li style="font-size:22px;padding-top:10px;"><span style="margin-left:-15px;color:#CCC;text-shadow: 2px 2px 1px rgba(63, 63, 63, 1);">Les ingrédients...</span></li>

<li>....</li>

</ul>

<div class="link"><a title="La recette complète" href="#">Lire la suite...</a></div>

<img style="position:absolute; left:350px; bottom:45px; opacity:1; border:solid thin f2e6e6;-moz-box-shadow: 0px 0px 5px 3px #ffffff;-webkit-box-shadow: 0px 0px 5px 3px #ffffff;-o-box-shadow: 0px 0px 5px 3px #ffffff;box-shadow: 0px 0px 5px 3px #ffffff;filter:progid:DXImageTransform.Microsoft.Shadow(color=#ffffff, Direction=NaN, Strength=5);;" src="img/menu.png" alt="chocolat" width="150" height="180"></div>

</div>

</section>

Code CSS

CSS

.tmi_photo .container .photo-content { background-color: rgba(0, 0, 0, 0.50); color: #fff; z-index: 100; -webkit-transition: all 500ms ease-out; -moz-transition: all 500ms ease-out; -o-transition: all 500ms ease-out; -ms-transition: all 500ms ease-out; transition: all 500ms ease-out; height: 100%; width: 100%; padding: 5px 5px 0; position: absolute; display: block; top: 0; left: 100%; opacity: 0; -moz-opacity: 0; filter:alpha(opacity=0); } .tmi_photo .container:hover .photo-content { opacity: 1; -moz-opacity: 1; filter:alpha(opacity=100); left: 0; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

.tmi_photo .container .photo-content {
background-color: rgba(0, 0, 0, 0.50);
color: #fff;
z-index: 100;
-webkit-transition: all 500ms ease-out;
-moz-transition: all 500ms ease-out;
-o-transition: all 500ms ease-out;
-ms-transition: all 500ms ease-out;
transition: all 500ms ease-out;
height: 100%;
width: 100%;
padding: 5px 5px 0;
position: absolute;
display: block;
top: 0;
left: 100%;
opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
}
.tmi_photo .container:hover .photo-content {
opacity: 1;
-moz-opacity: 1;
filter:alpha(opacity=100);
left: 0;
}

Source

David LAURENT | TMI | Webinnov™