4 efectos flotantes de leyenda de imagen fresca

Vista prévia

Descripción

Se trata de una biblioteca CSS que se utiliza para crear 4 efectos de animación interactivos geniales en los subtítulos de imagen cuando el mouse pasa el ratón.

Funcionamiento

Las reglas CSS básicas para los efectos Hover. Agregue los siguientes fragmentos de código CSS a su página web y listo.

/* effect 1 */

.ef1 .contentPart {

position: absolute;

top: 0px;

left: 0px;

width: 100%;

height: 100%;

background-color: #0f305d;

opacity: 0;

transition: all 0.4s;
}

.ef1 .contentPart:hover {

opacity: 1;

top: 3%;

left: 4%;
}

.ef1 .contentPart p {

color: #fff;

letter-spacing: 0px;

margin-top: 32px;

font-size: 20px;

margin-bottom: 24px;
}

.ef1 .contentPart a {

color: #fff;

letter-spacing: 0px;

font-size: 18px;
}

/* effect 2 */

.ef2 { overflow: hidden; }

.ef2 .contentPart {

position: absolute;

top: 0px;

left: 0px;

width: 50%;

height: 100%;

background-color: #0f305d;

opacity: 1;

transition: all 0.4s;

-webkit-transition: all 0.4s;

-moz-transition: all 0.4s;

transform: rotateY(-90deg);

-webkit-transform: rotateY(-90deg);

-moz-transform: rotateY(-90deg);

-webkit-transform-origin: 0 0;

-moz-transform-origin: 0 0;

transform-origin: 0 0;
}

.ef2:hover .contentPart {

transform: rotateY(0deg);

-webkit-transform: rotateY(0deg);

-moz-transform: rotateY(0deg);
}

.ef2:hover img {

transform: translateX(50%);

-webkit-transform: translateX(50%);

-moz-transform: translateX(50%);
}

.ef2 .contentPart p {

color: #fff;

letter-spacing: 0px;

margin-top: 32px;

font-size: 20px;

margin-bottom: 24px;
}

.ef2 .contentPart a {

color: #fff;

letter-spacing: 0px;

font-size: 18px;
}

/* effect 3 */

.ef3 .contentPart {

position: absolute;

left: 0px;

width: 100%;

height: 28%;

bottom: 0px;

background-color: #0f305d;

opacity: 1;

transition: all 0.4s;

-webkit-transition: all 0.4s;

-moz-transition: all 0.4s;
}

.ef3 .contentPart p { display: inline-block; }

.ef3 img {

position: relative;

z-index: 100;
}

.ef3:hover img { bottom: 28%; }

.ef3 .contentPart p {

color: #fff;

letter-spacing: 0px;

margin-top: 32px;

font-size: 20px;

margin-bottom: 24px;
}

.ef3 .contentPart a {

color: #fff;

letter-spacing: 0px;

font-size: 18px;
}

/* effect 4 */

.ef4 .contentPart {

position: absolute;

left: 0px;

width: 100%;

height: 100%;

bottom: 0px;

background-color: #0f305d;

opacity: 1;

transition: all 0.4s;

-webkit-transition: all 0.4s;

-moz-transition: all 0.4s;
}

.ef4 .contentPart p { display: inline-block; }

.ef4 img {

position: relative;

z-index: 100;
}

.ef4:hover img {

-webkit-transform: scale(0.5) translateY(40%);

-moz-transform: scale(0.5) translateY(40%);

transform: scale(0.5) translateY(40%);
}

.ef4 .contentPart p {

color: #fff;

letter-spacing: 0px;

margin-top: 32px;

font-size: 20px;

margin-bottom: 24px;
}

.ef4 .contentPart a {

color: #fff;

letter-spacing: 0px;

font-size: 18px;
}

Añade subtítulos a tus imágenes de la siguiente manera:

<div class="box ef1">

<img src="1.jpg">

<div class="contentPart">


<p>This is your Content Place.</p>


<a href="#">Click on Me</a>

</div>
</div>

<div class="box ef2">

<img src="2.jpg">

<div class="contentPart">


<p>This is your Content Place.</p>


<a href="#">Click on Me</a>

</div>
</div>

<div class="box ef3">

<img src="3.jpg">

<div class="contentPart">


<p>This is your Content Place.</p>


<a href="#">Click on Me</a>

</div>
</div>

<div class="box ef4">

<img src="4.jpg">

<div class="contentPart">


<p>This is your Content Place.</p>


<a href="#">Click on Me</a>

</div>
</div>