OriginalHoverEffects CSS3 effetti al passaggio del mouse
La potenza di CSS3 è enorme e in questo tutorial vedremo come sfruttare in modo molto creativo con effetto hover.
Stiamo andando a creare alcuni effetti delle miniature al passaggio del mouse con transizioni CSS3
La struttura
HTML
<div class="view"> <img src="image.gif" /> <div class="mask"> <h2>Title</h2> <p>Your Text</p> <a href="#" class="info">Read More</a> </div> </div>
Dopo aver creato il markup andiamo a impostare il nostro stile.
CSS
.view { width: 300px; height: 200px; margin: 10px; float: left; border: 10px solid #fff; overflow: hidden; position: relative; text-align: center; box-shadow: 1px 1px 2px #e6e6e6; cursor: default; background: #fff url(../images/bgimg.jpg) no-repeat center center } .view .mask, .view .content { width: 300px; height: 200px; position: absolute; overflow: hidden; top: 0; left: 0 } .view img { display: block; position: relative } .view 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 } .view p { font-family: Georgia, serif; font-style: italic; font-size: 12px; position: relative; color: #fff; padding: 10px 20px 20px; text-align: center } .view a.info { display: inline-block; text-decoration: none; padding: 7px 14px; background: #000; color: #fff; text-transform: uppercase; box-shadow: 0 0 1px #000 } .view a.info:hover { box-shadow: 0 0 5px #000 }
CSS3 ha davvero un grande potenziale per creare effetti piacevoli. Presto, ci spera, essere in grado di evitare l’uso di JavaScript per gli effetti semplici e contare al 100% su CSS, in tutti i browser.
Demo
Download Demo
https://tympanus.net/Tutorials/OriginalHoverEffects/
Lascia un commento
Devi essere connesso per inviare un commento.