tips: yootheme implementar modal con overlay

8 de abril de 2021
Posted in css, yootheme
8 de abril de 2021 Riskoo

tips: yootheme implementar modal con overlay

Bueno, hoy traigo un problema con el que me he encontrado con overlay de yootheme. Mi diseñador hizo una página la cual estoy rellenando. Las imágenes tenían un texto abajo y usó overlay. ¿Cuál fue el problema? El cliente pidió que cuando se cliqueara en la foto se pusiese en grande. Estuve viendo por decenas de foros de yootheme esta posibilidad pero todas o no daban solución o la solución era hacer override de la parte de overlay la cual no me interesaba porque recuerdo que tenía ya muchas páginas con imágenes.

Pues bien pongo aquí primeramente un video para que veáis que estoy trabajando con un overlay y como queda al final. Cada imagen tiene una clase puesta en la zona avanzada que se llama producto , tu puedes llamarlo como quieras pero recuerda sustituirlo luego en el css. Aparte añado también un pequeño código para modificar el h3 puesto que lo necesitaba.

 

A continuación os pongo el código de css.

.producto:active{
    width: 100vw !important;
    z-index: 2;
    position: fixed;
    background-color: rgba(0,0,0,0.5);
    left: 1px;
    top: 1px;
    top: 1;
    height: 100vh;
    background-size: cover;
}

.producto{
    position:relative;
    z-index: 1;
}
.producto:active .el-container {
    top: calc(100vh/4);
}
.producto:active h3{
    background-position: right;
    text-align: right;
    padding-right: 32px;
}

tips: yootheme implement modal with overlay

Well today I bring a problem that I have come across with yootheme overlay. My designer made a page which I am filling out. Images had text below and used overlay. What was the problem? The client asked that when the photo was clicked, it be big. I have been looking at dozens of yootheme forums for this possibility but all of them either did not provide a solution or the solution was to override the overlay part which did not interest me because I remember that I already had many pages with images.

Well, I first put a video here so you can see that I’m working with an overlay and how it looks at the end. Each image has a class set in the advanced area called product, you can call it whatever you want but remember to replace it later in the css. Besides I also add a small code to modify the h3 since I needed it.


            
            
                                    
                        
                        
                            
                 
            
                        
        
>