
Cambiar contenido de un div
Publicado por Cristina (2 intervenciones) el 04/11/2017 01:20:55
Buenas noches;
Esperaba que alguien pudiese ayudarme, estoy desarrollando una web y me he atascado en una cosa.
Tengo un div que actualmente contiene una imagen, un h2 y un p. Quiero que al hacer hover sobre ese div, la imagen se haga mas pequeña y que el h2 y el p desaparezcan y aparezca otro parrafo.
el codigo html está asi:
Quiero que el segundo parrafo "clase otro" sustituya a los de arriba.
la css está asi:
La verdad es que llevo un rato con esto y no me está dejando hacerlo. Alguien puede ayudarme?
Por cierto, hay 15 div mas como ese y hay que hacer una sustitución en cada uno con un texto diferente.
gracias
Esperaba que alguien pudiese ayudarme, estoy desarrollando una web y me he atascado en una cosa.
Tengo un div que actualmente contiene una imagen, un h2 y un p. Quiero que al hacer hover sobre ese div, la imagen se haga mas pequeña y que el h2 y el p desaparezcan y aparezca otro parrafo.
el codigo html está asi:
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="col-sm-6 col-md-4 goes">
<div id="onee" class="feature-box wow animated flipInX " data-wow-delay="0.3s">
<img src="assets/img/design.svg" alt="" class="img-fluid">
<div class="">
<h2>Diseño</h2>
<p>"La alernativa a un buen diseño es un mal diseño, no existe el no diseño"</p>
</div>
</div>
<div id="twoo"class="otro">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit quibusdam, magnam earum eveniet beatae eligendi aliquam quos modi nam neque, hic minima possimus ab tempore culpa a. Itaque quod, ad!</p>
</div>
</div>
Quiero que el segundo parrafo "clase otro" sustituya a los de arriba.
la css está asi:
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
.feature-box {
padding: 30px 0px;
text-align: center;
max-width: 380px;
margin: 0 auto;
}
.feature-box img {
width: 30%;
line-height: 0 !important;
margin: 0;
padding: 0;
z-index: 786;
}
.feature-box p {
padding: 0px 20px;
font-size: 11px;
opacity: 1;
}
.feature-box h2 {
margin: 0;
padding: 20px 0px;
font-weight: 200;
font-size: 13px;
opacity: 1;
}
.uno{
position:relative;
}
.goes{
opacity: 1;
}
.goes:hover{
opacity: 0;
}
.otro{
position: absolute;
opacity: 0;
}
.otro:hover{
position: absolute;
opacity: 1;
}
La verdad es que llevo un rato con esto y no me está dejando hacerlo. Alguien puede ayudarme?
Por cierto, hay 15 div mas como ese y hay que hacer una sustitución en cada uno con un texto diferente.
gracias
Valora esta pregunta


0