Home-theater-designers
Maaaring magdagdag ng dagdag na antas ng polish ang mga effect ng hover ng larawan sa iyong website. Lumilikha sila ng isang makinis na epekto, na ginagawang mas kaaya-ayang i-navigate ang mga gallery ng imahe o carousel. Ang pinakamagandang bahagi ay maaari kang lumikha ng mga epekto na ito gamit lamang ang CSS at walang JavaScript.
libreng mga text messaging app para sa mga android tablet
Maaari kang lumikha ng iba't ibang mga estilo ng animation sa iyong mga larawan. Kabilang dito ang pag-blur o pag-zoom sa background, pag-fade o pag-slide sa text, at pagpapalit ng kulay ng background.
MAKEUSEOF VIDEO OF THE DAY MAG-SCROLL PARA MAGPATULOY SA NILALAMAN
Paglikha ng HTML para sa
Magsimula sa pamamagitan ng paglikha ng isang index.html file sa loob ng isang walang laman na folder sa iyong computer, pagkatapos ay buksan ang file gamit ang isang text editor. Sa loob ng file, gawin ang HTML skeleton at idagdag ang sumusunod na markup sa loob ng opening body at closing body tag:
<div class="grid">
<div class="image-wrapper">
<img class="blur" src="https://picsum.photos/500?random=1" alt="">
<div class="content fade">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
</div>
</div>
<div class="image-wrapper">
<img class="zoom blur" src="https://picsum.photos/500?random=2" alt="">
<div class="content fade">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
</div>
</div>
<div class="image-wrapper">
<img class="blur" src="https://picsum.photos/500?random=3" alt="">
<div class="content slide-left">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
</div>
</div>
<div class="image-wrapper">
<img class="grey" src="https://picsum.photos/500?random=3" alt="">
<div class="content slide-left">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
</div>
</div>
</div>
Isa itong grid container na may apat na wrapper ng imahe. Ang mga elemento ng div na may pambalot ng imahe ang klase ay nagsisilbing pambalot para sa larawan at sa kaukulang teksto nito. Ang larawan at nilalaman ng bawat seksyon ay may natatanging hanay ng mga klase na idinagdag dito.
Sa loob ng style sheet, makikita mo i-target ang mga elementong ito sa pamamagitan ng kanilang mga pangalan ng klase at ilapat ang iba't ibang styling at animation effect. Ang teksto ay hindi ipapakita bilang default; ipapakita mo lamang ito kapag nag-hover ka sa ibabaw ng wrapper ng imahe, at ang imahe ay sasailalim sa iba't ibang mga epekto sa proseso.
Pagdaragdag ng Basic CSS
Ngayong nagawa mo na ang HTML, oras na para i-istilo ito gamit ang CSS. Gumawa ng style.css file at link sa style sheet na ito mula sa iyong HTML file, sa loob ng
<link rel="stylesheet" href="style.css">
Sa loob ng iyong style.css file, ang unang bagay na kailangan mong gawin ay i-reset ang margin sa katawan sa zero at magtakda ng ilang ibabang margin:
body {
margin: 0;
margin-bottom: 20rem;
}
Susunod, kailangan mong gawing a CSS grid na magagamit mo para maglatag ng mga elemento sa dalawang dimensyon . Ang sumusunod na code ay lumilikha ng grid na may kasing daming column o row na magkasya. Ang minimum na laki ng bawat column ay 300px at ang maximum na laki ay 1 fraction ng container:
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
Dahil gusto mong iposisyon ang text na may kaugnayan sa lalagyan nito, kailangan mong itakda ang posisyon na nauugnay sa wrapper ng imahe:
.image-wrapper {
position: relative;
overflow: hidden;
}
Ang susunod na hakbang ay ang istilo ng imahe. Ipakita ang larawan bilang block element, gawin itong sumasaklaw sa lapad ng buong lalagyan, at ilagay ito sa gitna ng lalagyan nito:
.image-wrapper > img {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
object-position: center;
}
Tulad ng para sa teksto, iposisyon ito sa gitna at magbigay ng isang transparent, mapusyaw na kulay abong background:
.image-wrapper > .content {
position: absolute;
inset: 0;
font-size: 2rem;
padding: 1rem;
background: rgba(255, 255, 255, .4);
display: flex;
align-items: center;
justify-content: center;
}
I-save ang CSS file at buksan index.html sa iyong browser. Dapat kang makahanap ng isang pahina na katulad ng nasa larawan sa ibaba.
Pagse-set sa Transition on at Texts
Ngayong nailapat mo na ang mga pangunahing istilo sa mga larawan, ang susunod na hakbang ay magdagdag ng ilang animation sa mga ito. Magsimula sa pamamagitan ng pagdaragdag ng isang paglipat sa parehong mga imahe at ang kanilang kaukulang teksto:
.image-wrapper > img,
.image-wrapper > .content {
transition: 200ms ease-in-out;
}
Nangangahulugan ito na ang lahat ng mga transition effect (ibig sabihin, fade-in, zoom, at blur) ay tatagal ng 200 millisecond at magkakaroon ng parehong timing curve.
Fade-In at Blur Animation
Ang unang istilo ng animation ay kumukupas sa teksto. Kapag nag-hover ka sa isang partikular na wrapper ng imahe, ang nilalaman na mayroong kumupas class ay magkakaroon ng ganitong epekto (fade-in at fade-out animation) na inilapat dito. Makamit mo ito sa pamamagitan ng pagtatakda ng opacity sa zero at pagpapalit nito sa isa kapag ang mouse ay nag-hover sa isang partikular na wrapper ng imahe:
kung paano gamitin ang laptop bilang monitor
.image-wrapper > .content.fade {
opacity: 0;
}
.image-wrapper:hover > .content.fade {
opacity: 1;
}
Kung ise-save mo ang file at susuriin ang iyong browser, makikita mo ang fade-in na animation na may bisa. Ngunit maaari mo ring mapansin na ang teksto ay medyo mahirap basahin (kung ang larawan ay malinaw at may maraming kaibahan). Alalahanin na ang lahat ng mga imahe ay mayroon ding pangalan ng klase lumabo . Ito ay para sa pag-blur ng mga larawan upang magdagdag ng ilang kinakailangang kaibahan sa pagitan ng mga ito at ng teksto:
image-wrapper:hover > img.blur {
filter: blur(5px)
}
Ngayon kapag nag-hover ka sa larawan, makikita mo na malalabo lang ito. Maaari mong dagdagan ang halaga ng pixel upang gawing mas malinaw ang blur sa mga larawan, sa gayon ay nagdaragdag ng higit na kaibahan sa pagitan nito at ng teksto.
Pagdaragdag ng Iba Pang Mga Epekto
Ang iba pang mga epekto ay ang pag-slide ng teksto mula sa kaliwa, pag-zoom sa larawan, at pagdaragdag ng grayscale sa larawan. Narito ang code para sa pagkamit ng lahat ng tatlong epekto:
.image-wrapper > .content.slide-left {
transform: translateX(100%)
}
.image-wrapper:hover > .content.slide-left {
transform: translateX(0%)
}
.image-wrapper:hover > img.grey {
filter: greyscale(1)
}
.image-wrapper:hover > img.blur {
filter: blur(5px)
}
.image-wrapper:hover > img.zoom {
transform: scale(1.1)
}
I-save ang file, pagkatapos ay pumunta sa iyong browser at mag-hover sa bawat larawan. Dapat mong makita ang iba't ibang mga epekto sa pagkilos.
Upang kumpletuhin ang mga slide-in effect, maaari kang lumikha ng tatlong higit pang mga wrapper ng imahe, bawat isa ay naglalaman ng isang imahe at teksto. Ang bawat piraso ng teksto ay magkakaroon ng pangalan ng klase slide-up , slide-down, o bahagyang-kanan . Pagkatapos ay ipapasa mo ang tamang halaga pixel, em, o rem , sa loob ng transform() function upang lumikha ng lahat ng tatlong mga epekto.
CSS Grid at Flexbox
Ang CSS Grid at Flexbox ay dalawang feature na nagbibigay-daan sa iyong lumikha ng mga kamangha-manghang layout para sa iyong website. Maaari kang lumikha ng halos anumang layout na gusto mo nang madali at i-customize ang mga row at column sa iyong panlasa. Ang mga column ay magiging tumutugon din bilang default. Ang pag-aaral kung kailan gagamitin ang isa sa iba ay makakatulong sa iyong maging isang nangungunang isang porsyentong developer ng CSS.