Oggi vi parlo di un effetto molto carino per dare un impatto più interessante alle preview delle nostre immagini.
Il risultato finale lo potete vedere qui, nella demo
DEMO
La struttura dell’HTML è davvero semplice, abbiamo un div che ne contiene un altro, al suo interno un’immagine, il testo ed un bottone che, nel nostro caso, reindirizza all’articolo di un presunto blog.
Questo è il codice:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Css 3 effects</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="thumb thumb-tenth">
<img src="img/girl.jpg" />
<div class="mask">
<h2>Titolo</h2>
<p>Uno dei tagli più in voga per l'estate è quello appena al di sopra dell'altezza spalle con frangia molto lunga, uno stile portato...</p>
<a href="#" class="info">Leggi tutto...</a>
</div>
</div>
</body>
</html>
e questo è il risultato
Non preoccupatevi, adesso viene il bello 🙂
Il foglio di stile che aggiungeremo avrà:
regole base per allineare nella pagina il contenuto e dare uno stile iniziale alla miniatura dell’immagine.
Regole avanzate che, grazie alle proprietà transform, transition ed altre ancora daranno un effetto molto gradevole.
Ecco il CSS:
.thumb {
width: 300px;
height: 200px;
margin: 100px auto;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
}
.thumb .mask, .thumb .content {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.thumb img {
display: block;
position: relative
}
.thumb h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0
}
.thumb p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center
}
.thumb a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000
}
.thumb a.info:hover {
box-shadow: 0 0 5px #000
}
.thumb-tenth img {
transform: scaleY(1);
transition: all 0.7s ease-in-out;
}
.thumb-tenth .mask {
background-color: rgba(255, 231, 179, 0.3);
transition: all 0.5s linear;
opacity: 0;
}
.thumb-tenth h2{
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
transform: scale(0);
color: #333;
transition: all 0.5s linear;
opacity: 0;
}
.thumb-tenth p {
color: #333;
opacity: 0;
transform: scale(0);
transition: all 0.5s linear;
}
.thumb-tenth a.info {
opacity: 0;
transform: scale(0);
transition: all 0.5s linear;
}
.thumb-tenth:hover img {
transform: scale(10);
opacity: 0;
}
.thumb-tenth:hover .mask {
opacity: 1;
}
.thumb-tenth:hover h2,
.thumb-tenth:hover p,
.thumb-tenth:hover a.info{
transform: scale(1);
opacity: 1;
}
Il risultato finale con il CSS:
See the Pen Hover effect on thumbnail by Eugenio (@rupertone) on CodePen.0
DEMO CSS3 HOVER
Approfondiremo le proprietà dei CSS3 nei prossimi tutorial, intanto buon divertimento 🙂
Qui trovate i files della demo
