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:
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 27 28 |
<!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:
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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 |
@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