web-html5-scripts/cards/card-hover-interaction/index.html
2020-05-07 20:51:13 +02:00

73 lines
2.1 KiB
HTML

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Card Hover Interaction</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<figure class="card card--1" style="--image-src: url('https://source.unsplash.com/78A265wPiO4')">
<figcaption>
<span class="info">
<h3>The Hills</h3>
<span>by David Marcu</span>
</span>
<span class="links">
<a href="#"><i class="fas fa-heart"></i></a>
<a href="#" target="_blank"><i class="fab fa-instagram"></i></a>
<a href="https://unsplash.com/photos/78A265wPiO4" target="_blank"><i class="fas fa-share"></i></a>
</span>
</figcaption>
</figure>
<figure class="card card--2" style="--image-src: url('https://source.unsplash.com/TFyi0QOx08c')">
<figcaption>
<span class="info">
<h3>The Forest</h3>
<span>by Jay Mantri</span>
</span>
<span class="links">
<a href="#"><i class="fas fa-heart"></i></a>
<a href="#" target="_blank"><i class="fab fa-instagram"></i></a>
<a href="https://unsplash.com/photos/TFyi0QOx08c" target="_blank"><i class="fas fa-share"></i></a>
</span>
</figcaption>
</figure>
<figure class="card card--3" style="--image-src: url('https://source.unsplash.com/PP8Escz15d8')">
<figcaption>
<span class="info">
<h3>The Desert</h3>
<span>by Keith Hardy</span>
</span>
<span class="links">
<a href="#"><i class="fas fa-heart"></i></a>
<a href="#" target="_blank"><i class="fab fa-instagram"></i></a>
<a href="https://unsplash.com/photos/PP8Escz15d8" target="_blank"><i class="fas fa-share"></i></a>
</span>
</figcaption>
</figure>
<figure class="card card--4" style="--image-src: url('https://source.unsplash.com/DLwUVlzrP0Q')">
<figcaption>
<span class="info">
<h3>The Ocean</h3>
<span>by Dan Stark</span>
</span>
<span class="links">
<a href="#"><i class="fas fa-heart"></i></a>
<a href="#" target="_blank"><i class="fab fa-instagram"></i></a>
<a href="https://unsplash.com/photos/DLwUVlzrP0Q" target="_blank"><i class="fas fa-share"></i></a>
</span>
</figcaption>
</figure>
</div>
</body>
</html>