center (v and h) an expanded element

It is not easy to center vertically and horizontally an expanded element in a page.

I found this code working for me:

.expansible {max-width: 10vw; 
    transition: all 1s; 
    transition:transform 0.25s ease;}
.expanded {
    max-width: 20vw;
    position: absolute;
    left: 30%;
    top: 25%;

The image is expended with this js code (put at the end of a file):

document.querySelectorAll('img.expansible').forEach(imageElement => {
  imageElement.addEventListener('click', e => {

and adding the class expansible to the images you want expansible.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.