Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » HTML » Caption aparece en Desktop pero no en Mobile

HTML - Caption aparece en Desktop pero no en Mobile

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 3
Ha aumentado su posición en 16 puestos en HTML (en relación al último mes)
Gráfica de HTML

Caption aparece en Desktop pero no en Mobile

Publicado por rootsandculture (2 intervenciones) el 23/04/2020 03:27:43
Buenas, estoy modificando una plantilla, y necesitaria que en una galeria de fotos aparezca abajo un texto. Logre hacerlo aparecer en el navegador de descritorio, pero cuando lo veo en mobile no aparece el texto.

Me darian una mano en que puede ser lo que esta pasando?

1
2
3
4
5
6
7
8
<div data-groups="[&quot;people&quot;]" class="col-md-3 col-sm-6 no-pad">
    <div class="portfolio-item"><a href="../media/galeria/bonito-bodoquena/1.jpg" title="Test 1" class="swipebox"><img src="../media/galeria/bonito-bodoquena/1.jpg" alt="">
        <div class="portfolio-overlay">
          <div class="caption">
            <h5>Test 1</h5><span>Lorem ipsum dolor sit amet</span>
          </div>
        </div></a></div>
</div>

Screenshot-2020-04-22-22.19.38
Screenshot_20200422-222600
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil
Val: 3
Ha aumentado su posición en 16 puestos en HTML (en relación al último mes)
Gráfica de HTML

Caption aparece en Desktop pero no en Mobile

Publicado por rootsandculture (2 intervenciones) el 23/04/2020 03:54:44
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
/*  Portfolio  */
.portfolio-sorting {
  text-transform: uppercase;
  margin-bottom: 48px; }
  .portfolio-sorting li a {
    color: #777;
    text-decoration: none;
    margin: 10px;
    letter-spacing: 2px; }
  .portfolio-sorting a:hover, .portfolio-sorting a.active {
    color: #000; }
 
.portfolio-item {
  font-size: 14px;
  position: relative;
  overflow: hidden;
  display: block;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease; }
 
.portfolio-items {
  margin-bottom: 0; }
 
.portfolio-item a {
  display: inline-block;
  color: #000 !important; }
  .portfolio-item a:hover .portfolio-overlay {
    opacity: 1;
    visibility: visible; }
.portfolio-item img {
  max-width: none;
  position: relative;
  left: 0;
  width: 100%; }
.portfolio-item:hover img {
  transform: scale(1.2, 1.2) translate(15px, 15px);
  -ms-transform: scale(1.2, 1.2) translate(15px, 15px);
  -webkit-transform: scale(1.2, 1.2) translate(15px, 15px); }
 
.portfolio-overlay {
  background: none repeat scroll 0 0 rgba(255, 255, 255, 0.75);
  height: 100%;
  position: absolute;
  transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  width: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden; }
  .portfolio-overlay .caption {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0 30px;
    text-align: left;
    transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    opacity: 0; }
 
.portfolio-item a:hover .portfolio-overlay .caption {
  bottom: 10%;
  opacity: 1; }
 
.portfolio-header h1 {
  font-size: 72px;
  line-height: 80px; }
 
.portfolio-item a h5 {
  margin-bottom: 0;
  font-weight: 400;
  color: #555; }
 
.portfolio-header .scroll-btn {
  margin-left: 0; }
  .portfolio-header .scroll-btn .mouse {
    border: 2px solid #D3BD98; }
  .portfolio-header .scroll-btn .weel span {
    background: #D3BD98; }
 
.intro .intro-body .portfolio-header {
  vertical-align: bottom; }
 
.portfolio-wide div {
  margin-bottom: 10px; }
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar