principiante en HTML y CSS aquí. Estoy tratando de personalizar mi sitio web que se ejecuta en el tema de wordpress de Semplice. Vi un efecto genial en Codepen que te permitía pasar dos imágenes una sobre la otra en CSS. Pude crear mi propia forma y hacer que el código funcionara en mi tema. Hago esto agregando un ‘módulo de código’ que, por lo que entiendo, solo hace un / para que se ejecute el código.
El código funciona bien y también pude agregar el CSS personalizado a través del tema. El problema radica en la escala: tan pronto como reduzco el ancho del navegador, hay una brecha enorme entre los divs (repito este código tres o cuatro veces, quiero usarlos como portadas de proyectos), mientras que otros objetos se escalan perfectamente con el tema. . Siento que me falta una opción de margen o relleno simple aquí, pero todo lo que probé, desde el margen hasta el relleno, se rompe con la escala. El tema también viene con sus propias opciones de relleno interno, pero parecen romperse. Intenté agregar margin-bottom y -top al CSS, con% y píxeles, pero ambos fueron en vano.
Entiendo que probablemente haya algo en el tema aquí que rompa este código o impida que se use correctamente, pero esperaba que se pudiera agregar algo como !important para evitar que el código se rompa y/o juegue bien con el tema .
El HTML utilizado en el DIV:
<div class="main" style="height: 100%">
<img src="https://i.imgur.com/hMJn55T.jpg" alt="" id="img-1">
<img src="https://i.imgur.com/gyjAnHr.jpg" alt="">
</div>
El CSS, ingresado a través del tema:
}
.main{
display:inline-block !important;
margin-bottom:10px !important;
margin-top:10px !important;
padding: 20px;
position: absolute !important;
}
.main img{
position: absolute;
width: 100%;
}
.main h6{
position:absolute;
display:inline;
margin-top: -5%;
margin-bottom: 10%;
}
.main #img-1:hover{
z-index: 99;
-webkit-clip-path: polygon(0% 0%, 95% 0%, 75% 100%, 0% 100%);
clip-path: polygon(0% 0%, 95% 0%, 75% 100%, 0% 100%);
transition-duration: 800ms;
transition-timing-function: ease;
}
.main #img-1{
z-index:10;
-webkit-clip-path: polygon(0% 0%, 35% 0%, 15% 100%, 0% 100%);
clip-path: polygon(0% 0%, 35% 0%, 15% 100%, 0% 100%);
transition-duration: 450ms;
transition-timing-function: ease;
}
Esta es mi primera publicación, traté de ser conciso, pero si falta algo o no está claro, házmelo saber y agregaré más información. 🙂
La escala entre el espacio se puede ver en estas imágenes:
Imagen: Como deben ser, antes de cambiar el tamaño del navegador.
Imagen: demasiado separados
Actualización: esta es la sección tal como está en el tema, completa con divs generados por el tema.
<section id="section_bbyngcjvd" class="content-block" data-column-mode-sm="single" data-column-mode-xs="single">
<div class="container">
<div id="row_yobohwqkk" class="row"><div id="column_iht59fpyu" class="column" data-xl-width="12">
<div class="content-wrapper">
<div id="content_pozj163h8" class="column-content" data-module="code">
<div class="is-content ce-code">
<div class="main" style="height: 100%">
<img src="https://i.imgur.com/hMJn55T.jpg" alt="" id="img-1">
<img src="https://i.imgur.com/gyjAnHr.jpg" alt="">
</div>
</div>
</div>
</div>
</div></div>
</div>
</section>
.