Il mondo dei CSS è sconfinato, si possono ottenere effetti strabilianti.
Personalmente preferisco non esagerare e utilizzare gli effetti soltanto per dare un tocco in più ad un’immagine oppure ad un testo.
Nel tutorial di oggi vi presento un effetto semplicissimo.
Si tratta di un box con un’immagine e del testo a fianco:
quando, con il puntatore del mouse, andiamo sul testo esso sovrappone all’immagine un altro testo (in questo caso una descrizione dell’autore).
Si può utilizzare per diversi scopi, la fantasia è l’unico limite.
Ecco l’esempio:
See the Pen CSS3 Hover test by Eugenio (@rupertone) on CodePen.0
Questo è il semplice HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS hover</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <h1> CSS3 Effetti Hover </h1> <div class="author"> <img src="http://s15.postimg.org/yj18k5w0b/image.jpg" alt="image"> <div class="author-testo-hover"> <h3>Eugenio Corrao</h3> <h4>Web Design</h4> <p>Nulla rhoncus orci sed odio euismod vestibulum. Praesent porta aliquet nulla, ut mattis velit rhoncus eu duspendisse nibh orci laoreet. </p> </div> <div class="author-sfondo author-testo"> <p>Eugenio Corrao</p> <a href="https://twitter.com/eugenione">@eugenione</a> </div> </div> </div> </body> </html>
E questo é il codice CSS:
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
body {
background:#2ecc71;
}
#container {
max-width:500px;
margin-left:auto;
margin-right:auto;
margin-top:10%;
}
h1 {
font-family: "Open Sans", sans;
font-weight:300;
text-align:center;
color:rgba(255,255,255,0.6)
}
h2 {
color:#2c3e52;
font-family: "Open Sans", sans;
font-size: 14px;
text-align:center;
font-weight:700;
margin-bottom:50px;
}
.author {
/*width: 460px;*/
height: 250px;
/*height: 230px;*/
overflow: hidden;
position: relative;
}
.author img {
position: absolute;
top: 0;
left: 0;
height: inherit;
width: auto;
height: 100%;
float: left;
transition: all 0.8s;
-moz-transition: all 0.8s;
}
.author:hover img {
/*opacity: 0.4 !important;*/
}
.author .author-testo-hover h3 {
padding: 0px;
margin: 0px;
font-size: 25px;
font-weight:300;
font-family: "Open Sans";
}
.author .author-testo-hover h4 {
padding: 0px;
padding-bottom: 13px;
margin: 0px;
font-size: 14px;
letter-spacing: 3px;
width: 90%;
font-family: "Open Sans";
text-transform:uppercase;
border-bottom: 2px solid #000;
}
.author .author-testo-hover p {
padding-top: 13px;
font-size: 14px;
line-height: 20px;
font-family: "Open Sans";
}
.author .author-testo-hover{
width: 42%;
height: 89%;
position: absolute;
top: 0%;
left: 50%;
padding: 3% 4%;
background: #D90E0E;
color: rgba(255,255,255,1);
/* display: none;*/
transition: all 0.5s ease-in-out;
-moz-transition: all 0.4s;
}
.author:hover .author-testo-hover {
display: block !important;
color: rgba(255,255,255,1);
background:rgba(217,14,14,0.85);
left: 0px;
top: 0px;
}
.author .author-testo {
width: 50%;
height: inherit;
background: #000;
float: left;
position: absolute;
left: 50%;
}
.author .author-testo p {
padding:100px 0px 0px 20px;
font-size: 24px;
font-family: "Open Sans";
font-weight:700;
color: #fff;
}
.author .author-testo p span {
font-family: "Open Sans" !important;
}
.author .author-testo a , .author-sfondo .author-testo {
padding: 0px 0px 0px 20px;
font-size: 14px !important;
color:#FF5A22 !important;
font-family: "Open Sans" !important;
text-decoration: none !important;
}
.author .author-testo {
float: left;
}
.author-sfondo {
background: #eee !important;
width: 50% !important;
height: inherit !important;
}
.author-sfondo p {
color: #000 !important;
}
Semplicità con un tocco di stile:)
Scarica i files del tutorial
