¿Cómo hacer que los iconos aparezcan al desplazarse?
Publicado por ERNESTO MUNOZ (1 intervención) el 08/07/2021 02:56:44
Que tal a todos. Quiero hacer que los iconos aparezcan con un efecto de desvanecimiento hacia arriba cuando me desplace con el mouse hacia el área donde estos se encuentran. ¿Cómo puedo hacerlo solamente con CSS?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
</head>
<body>
<div style="height: 60px;background-color: darkblue;color: wheat;">
<p>menu de navegacion</p>
</div>
<div style="height: 800px;background-image: url('https://cdn.pixabay.com/photo/2015/12/08/00/31/office-1081807_960_720.jpg');background-size: cover;">
</div>
<div class="listas-iconos" style="text-align: center;">
<div class="row" style="background-color: lemonchiffon">
<div class="col-sm-4">
<img src="https://cdn1.iconfinder.com/data/icons/business-456/500/global-business-256.png" alt="">
<p>Establecimiento de la relación</p>
</div>
<div class="col-sm-4">
<img src="https://cdn1.iconfinder.com/data/icons/business-456/500/processing-128.png" alt="">
<p>Diagnóstico de necesidades</p>
</div>
<div class="col-sm">
<img src="https://cdn1.iconfinder.com/data/icons/business-456/500/target-128.png" alt="">
<p>Plan de acción</p>
</div>
</div>
<div class="row" style="background-color:burlywood">
<div class="col-sm-6">
<img src="https://cdn1.iconfinder.com/data/icons/business-456/500/management-128.png" alt="">
<p>Acción y monitoreo</p>
</div>
<div class="col-sm">
<img src="https://cdn0.iconfinder.com/data/icons/business-startup-10/50/16-128.png" alt="">
<p>Feedback y seguimiento</p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
<style>
img{ height: 80px;}.row{
padding: 50px 0;}</style>
Valora esta pregunta
0