Obraz z przesuwanym panelem opisu przy użyciu przejść CSS3

Ten przykład CSS pokazuje, jak dodać animowany panel opisu do obrazów, które otwierają się, gdy po najechaniu myszką przewraca się obraz za pomocą przejść CSS3. Poprzez zawijanie obrazu tak jakby wewnątrz obrazka, który ma pod sobą nowo wprowadzony opis DIV, w którym znajduje się sam opis, możemy przesuwać później do widoku za pomocą właściwości transformacji: translate () CSS3. Wszystkie cztery kierunki  (w górę, w dół, w prawo lub w lewo) można efekt zobaczyć na stronie autora scryptu TUTAJ. Początek animacji ślizgowej jest opóźniony o 0,5 sekundy za każdym razem, gdy używana jest właściwość opóźnienia przejścia, a więc występuje po dodaniu cienia CSS3 do obrazu w celu uzyskania efektu podniesionego obrazu. Rezultatem jest fajny obraz z przesuwanym panelem opisu, który nie używa nic więcej niż HTML / CSS do stworzenia efektu.

Poniższe działa najlepiej w nowoczesnej przeglądarce obsługującej przejścia CSS3, a mianowicie IE10 +, FF3.5 +, Chrome / Safari i Opera 10. Mniejsza liczba przeglądarek, takich jak IE9, będzie nadal widoczna w panelu opisu naMouseover, po prostu nie będzie mogła przejść:

Kod pliku style:

<style>

.imagepluscontainer{ /* main image container */
position: relative;
z-index: 1;
}

.imagepluscontainer img{ /* CSS for image within container */
position: relative;
z-index: 2;
-moz-transition: all 0.5s ease; /* Enable CSS3 transition on all props */
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.imagepluscontainer:hover img{ /* CSS for image when mouse hovers over main container */
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-transform: scale(1.05, 1.05);
-webkit-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}

.imagepluscontainer div.desc{ /* CSS for desc div of each image. */
position: absolute;
width: 90%;
z-index: 1; /* Set z-index to that less than image's, so it's hidden beneath it */
bottom: 0; /* Default position of desc div is bottom of container, setting it up to slide down */
left: 5px;
padding: 8px;
background: rgba(0, 0, 0, 0.8); /* black bg with 80% opacity */
color: white;
-moz-border-radius: 0 0 8px 8px; /* CSS3 rounded borders */
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
opacity: 0; /* Set initial opacity to 0 */
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); /* CSS3 shadows */
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-moz-transition: all 0.5s ease 0.5s; /* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */
-webkit-transition: all 0.5s ease 0.5s;
-o-transition: all 0.5s ease 0.5s;
-ms-transition: all 0.5s ease 0.5s;
transition: all 0.5s ease 0.5s;
}

.imagepluscontainer div.desc a{
color: white;
}

.imagepluscontainer:hover div.desc{ /* CSS for desc div when mouse hovers over main container */
-moz-transform: translate(0, 100%);
-webkit-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
opacity:1; /* Reveal desc DIV fully */
}

/*### Below CSS when applied to desc DIV slides the desc div from the right edge of the image ###*/

.imagepluscontainer div.rightslide{
width: 150px; /* reset from default */
top:15px;
right:0;
left:auto; /* reset from default */
bottom:auto; /* reset from default */
padding-left:15px;
-moz-border-radius: 0 8px 8px 0;
-webkit-border-radius: 0 8px 8px 0;
border-radius: 0 8px 8px 0;
}

.imagepluscontainer:hover div.rightslide{
-moz-transform: translate(100%, 0);
-webkit-transform: translate(100%, 0);
-ms-transform: translate(100%, 0);
-o-transform: translate(100%, 0);
transform: translate(100%, 0);
}

/*### Below CSS when applied to desc DIV slides the desc div from the left edge of the image ###*/

.imagepluscontainer div.leftslide{
width: 150px; /* reset from default */
top:15px;
left:0;
bottom:auto; /* reset from default */
padding-left:15px;
-moz-border-radius: 8px 0 0 8px;
-webkit-border-radius: 8px 0 0 8px;
border-radius: 8px 0 0 8px;
}

.imagepluscontainer:hover div.leftslide{
-moz-transform: translate(-100%, 0);
-webkit-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
-o-transform: translate(-100%, 0);
transform:translate(-100%, 0);
}

/*### Below CSS when applied to desc DIV slides the desc div from the top edge of the image ###*/

.imagepluscontainer div.upslide{
top:0;
bottom:auto; /* reset from default */
padding-bottom:10px;
-moz-border-radius: 8px 8px 0 0;
-webkit-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
}

.imagepluscontainer:hover div.upslide{
-moz-transform: translate(0, -100%);
-webkit-transform: translate(0, -100%);
-ms-transform: translate(0, -100%);
-o-transform: translate(0, -100%);
transform:translate(0, -100%);
}

</style>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Oraz kod w pliku .html:

<!-- Make sure each container contains explicit width/height attrs that reflect the dimensions of the showcased image-->

<div class="imagepluscontainer" style="width:263px; height:199px; z-index:2">
<img src="http://img580.imageshack.us/img580/4546/stadiumij.jpg" />
<div class="desc">
Capable of seating 50,000 spectators, the <a href="http://en.wikipedia.org/wiki/Colosseum">Colosseum</a> was used for gladiatorial contests and public spectacles such as executions.
</div>
</div>

<br />

<div class="imagepluscontainer" style="width:263px; height:199px; left:350px">
<img src="http://img580.imageshack.us/img580/4546/stadiumij.jpg" />
<div class="desc rightslide">
Capable of seating 50,000 spectators, the <a href="http://en.wikipedia.org/wiki/Colosseum">Colosseum</a> was used for gladiatorial contests and public spectacles such as executions.
</div>
</div>

<br />

<div class="imagepluscontainer" style="width:263px; height:199px">
<img src="http://img580.imageshack.us/img580/4546/stadiumij.jpg" />
<div class="desc upslide">
Capable of seating 50,000 spectators, the <a href="http://en.wikipedia.org/wiki/Colosseum">Colosseum</a> was used for gladiatorial contests and public spectacles such as executions.
</div>
</div>

<br />

<div class="imagepluscontainer" style="width:263px; height:199px; left:350px">
<img src="http://img580.imageshack.us/img580/4546/stadiumij.jpg" />
<div class="desc leftslide">
Capable of seating 50,000 spectators, the <a href="http://en.wikipedia.org/wiki/Colosseum">Colosseum</a> was used for gladiatorial contests and public spectacles such as executions.
</div>
</div>

 

Projekt © 2009 - INFOPROG 67905 odwiedzin