Suprapunere (overlay) la hover pe imagine
Puteți folosi CSS pentru a crea efecte de suprapunere care apar atunci când utilizatorul trece cu mausul peste o imagine. Suprapunerea este plasată peste imagine folosind poziționare absolută în interiorul unui container relativ. Diferite tranziții controlează modul în care apare suprapunerea — poate apărea treptat sau poate aluneca dintr-o direcție oarecare.
Apariție treptată a textului
Acest exemplu face să apară treptat o suprapunere întunecată cu text alb peste imagine, la hover. Suprapunerea folosește opacity cu o tranziție pentru a crea un efect lin de apariție.
Prompt
Creează o suprapunere la hover pe o imagine care estompează apariția unui text. Afișează o imagine avatar în interiorul unui container cu poziție relativă. La hover, o suprapunere semi-transparentă închisă cu textul alb centrat "Salut Lume" apare treptat peste imagine folosind o tranziție de opacitate.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,0.5);
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>
<h2>Fade in Overlay</h2>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</body>
</html>
Apariție treptată a unei casete
Acest exemplu reduce opacitatea imaginii și afișează o casetă colorată cu text în centru, la hover.
Prompt
Creează o suprapunere la hover pe o imagine care estompează apariția unei casete. Afișează o imagine avatar în interiorul unui container cu poziție relativă. La hover, apare o casetă de text albă centrată peste imagine, afișând "John Doe" în interiorul unei casete stilizate cu o culoare de fundal, folosind o tranziție de opacitate.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 50%;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.text {
background-color: #04AA6D;
color: white;
font-size: 16px;
padding: 16px 32px;
}
</style>
</head>
<body>
<h2>Fade in a Box</h2>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image" style="width:100%">
<div class="middle">
<div class="text">John Doe</div>
</div>
</div>
</body>
</html>
Alunecare din partea de sus
Acest exemplu face să alunece o suprapunere întunecată din partea de sus a imaginii la hover, folosind o tranziție de height.
Prompt
Creează o suprapunere la hover pe o imagine care alunecă din partea de sus. Afișează o imagine avatar în interiorul unui container. La hover, o suprapunere semi-transparentă închisă alunecă în jos din partea de sus a imaginii cu textul alb centrat "Salut Lume", folosind o tranziție de înălțime.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.container:hover .overlay {
height: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>
<h2>Slide in Overlay from the Top</h2>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</body>
</html>
Alunecare din partea de jos
Acest exemplu face să alunece o suprapunere întunecată din partea de jos a imaginii la hover.
Prompt
Creează o suprapunere la hover pe o imagine care alunecă din partea de jos. Afișează o imagine avatar în interiorul unui container. La hover, o suprapunere semi-transparentă închisă alunecă în sus din partea de jos a imaginii cu textul alb centrat "Salut Lume", folosind o tranziție de înălțime.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.container:hover .overlay {
bottom: 0;
height: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>
<h2>Slide in Overlay from the Bottom</h2>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</body>
</html>
Alunecare din stânga
Acest exemplu face să alunece o suprapunere întunecată din partea stângă a imaginii la hover, folosind o tranziție de width.
Prompt
Creează o suprapunere la hover pe o imagine care alunecă din partea stângă. Afișează o imagine avatar în interiorul unui container. La hover, o suprapunere semi-transparentă închisă alunecă din partea stângă a imaginii cu textul alb centrat "Salut Lume", folosind o tranziție de lățime.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.container:hover .overlay {
width: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>
<h2>Slide in Overlay from the Left</h2>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</body>
</html>
Alunecare din dreapta
Acest exemplu face să alunece o suprapunere întunecată din partea dreaptă a imaginii la hover.
Prompt
Creează o suprapunere la hover pe o imagine care alunecă din partea dreaptă. Afișează o imagine avatar în interiorul unui container. La hover, o suprapunere semi-transparentă închisă alunecă din partea dreaptă a imaginii cu textul alb centrat "Salut Lume", folosind o tranziție de lățime.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 100%;
right: 0;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.container:hover .overlay {
width: 100%;
left: 0;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>
<h2>Slide in Overlay from the Right</h2>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</body>
</html>
Întoarcerea unei imagini (flip)
Puteți întoarce o imagine pe orizontală atunci când utilizatorul trece cu mausul peste ea. Aceasta folosește proprietatea CSS transform cu scaleX(-1) pentru a oglindi imaginea.
Exemplu
Mutați mausul peste imagine pentru a o întoarce pe orizontală.
Prompt
Creează o pagină cu o imagine care se oglindește orizontal la hover. Folosește transformarea CSS scaleX(-1) pe starea img:hover pentru a oglindi imaginea când mausul este deasupra ei.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img:hover {
transform: scaleX(-1);
}
</style>
</head>
<body>
<h2>Flip an Image</h2>
<p>Move your mouse over the image.</p>
<img src="madrid.jpg" alt="Madrid" width="400" height="300">
</body>
</html>
Galerie de imagini responsive
CSS poate fi folosit pentru a crea galerii de imagini responsive. Acest exemplu folosește media queries pentru a rearanja imaginile pe diferite dimensiuni de ecran. Redimensionați fereastra browserului pentru a vedea efectul.
Sfat: Citiți mai multe despre Responsive Web Design în Tutorialul CSS RWD.
Exemplu
Această galerie afișează patru imagini una lângă alta pe ecrane mari, câte două pe rând pe ecrane medii, și câte una pe rând pe ecrane mici.
Prompt
Creează o galerie de imagini responsivă cu patru imagini pe un rând. Fiecare element al galeriei are o imagine cu link și o descriere dedesubt. Folosește media queries astfel încât la 768px sau mai puțin aspectul se schimbă în două imagini pe rând, iar la 480px sau mai puțin se aranjează vertical, câte o imagine pe rând.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.gallery-item {
border: 1px solid #ccc;
margin: 10px;
width: calc(25% - 20px);
}
.gallery-item a {
display: block;
}
.gallery-item img {
width: 100%;
height: auto;
}
.desc {
padding: 15px;
text-align: center;
}
@media only screen and (max-width: 768px) {
.gallery-item {
width: calc(50% - 20px);
}
}
@media only screen and (max-width: 480px) {
.gallery-item {
width: calc(100% - 20px);
}
}
</style>
</head>
<body>
<h2>Responsive Image Gallery</h2>
<h4>Resize the browser window to see the effect!</h4>
<div class="gallery">
<div class="gallery-item">
<a target="_blank" href="https://prompt-cookbook.com">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Cinque Terre</div>
</div>
<div class="gallery-item">
<a target="_blank" href="https://prompt-cookbook.com">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Green Forest</div>
</div>
<div class="gallery-item">
<a target="_blank" href="https://prompt-cookbook.com">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Northern Lights</div>
</div>
<div class="gallery-item">
<a target="_blank" href="https://prompt-cookbook.com">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Mountains</div>
</div>
</div>
<p>Here we use media queries to re-arrange the images on different screen sizes:</p>
<ul>
<li>If screen is larger than 768px wide - show four images side by side</li>
<li>If screen is smaller than 768px - show two images side by side</li>
<li>If screen is smaller than 480px - stack the images vertically (100%)</li>
</ul>
</body>
</html>