3 Cool CSS3 Image Hover -efektit
Nykyaikaisessa verkossa on lukuisia tekniikoita, joiden avulla voidaan luoda mielenkiintoisia vuorovaikutuksia, mutta yksinkertaisimmista ja tyylikkäimmistä on yleensä CSS ja erityisesti CSS3: n mukana tulevat lisäykset.
Vanhojen päivien aikana jouduttiin luottamaan JavaScriptin tällaisiin vaikutuksiin, mutta CSS3: n kaikkien selainten tukemisen ansiosta on nyt mahdollista luoda tällaisia tehosteita ilman minkäänlaista komentosarjaa. On valitettavasti edelleen selaimia (IE9 ja sitä alhaisempi), jotka eivät tue CSS3: ta, joten sinun on joko varattava vanhoille selaimille tai kohdattava vaikutus progressiivisena lisälaitteena.
Tänään tarkastelemme, kuinka voimme soveltaa viileitä, mutta siistit hover-efektit näyttääksesi ja piilottaaksemme kuvia kuvateksteissä.
Jos haluat noudattaa koodia yhdessä, voit lataa tiedostot täältä.
Demo 1
Ensimmäinen demo on yksinkertaisin: kuva lentää oikealle paljastaakseen kuvatekstin.
Merkintä
Toisen demojemme html-mallissa käytämme hyvin samankaltaista merkintää ensimmäiseen demoimme. Mutta tällä kertaa käytämme demo-2 : tä luokana ja lisätään nolla- luokka:
This is a cool title!
Lorem ipsum dolor sit amet.
CSS
Meidän CSS on melkein sama kuin ensimmäinen demo, paitsi että tällä kertaa siirrämme kuvaa alaspäin asettamalla omaisuus alhaalta -96px. Käytämme myös CSS3: n siirtymistä sujuvan vaikutuksen aikaansaamiseksi:
.demo-2 {position:relative;width:300px;height:200px;overflow:hidden;float:left;margin-right:20px;background-color:rgba(26,76,110,0.5)}.demo-2 p,.demo-2 h2 {color:#fff;padding:10px;left:-20px;top:20px;position:relative}.demo-2 p {font-family:'Lato';font-size:12px;line-height:18px;margin:0}.demo-2 h2 {font-size:20px;line-height:24px;margin:0;font-family:'Lato'}.effect img {position:absolute;left:0;bottom:0;cursor:pointer;margin:-12px 0;-webkit-transition:bottom .3s ease-in-out;-moz-transition:bottom .3s ease-in-out;-o-transition:bottom .3s ease-in-out;transition:bottom .3s ease-in-out}.effect img.top:hover {bottom:-96px;padding-top:100px}h2.zero,p.zero {margin:0;padding:0}Demo 3
Viimeisen demojamme luomme kääntökorttivaikutuksen. Tämä tarkoittaa sitä, että hiirellä hiirtäsi kuvaan se pyörii sen akselin ympäri selvittääksesi kuvauksen.