Effect zoom lens CSS on images


Mtpanorama

Effect zoom lens CSS on images

Zoom lens CSS, without programming, this is visually interesting a as easy effect as. Part of a series of styles that they will change following each case we can see 3 keys so that this works.

First we put the images in a container to which we are going to give some to him measured, and but the important thing, we are going to tell him that everything what it overflows to him is not visible, since when we position ourselves on the image this will increase of size.

.marcoFoto \ {
width: 33%;
overflow: they hidden;
}

The second part comes with the image, to which we will tell him that it occupies the total of his container or frame if we thought that it is a real photo. Furthermore thinking about the effect so that the image does not become great derrepente, but it increases and it falls progressively of size we will use the property transition that will have effect when we position ourselves on the image although not this in a selecctor with: to hover

.marcoFoto img \ {
transition: all .4s ease;
width: 100%;
}

Finally we are going to tell him that transformations we want to apply to him when the event takes place to position itself on the image (: to hover). In this case we are going to him to say that the size is increased of the image to a size of 150% creating a zoom lens effect and jointly that turns 20 degrees to give him but brightness, furthermore we are saying to him that the image is transparent having this opacity of 60%

.marcoFoto img: to hover \ {
transform: scale (1.5) broken to you (20deg);
opacity: 0.6;
}

Complete code of the example

Example in operation:

Image Zoom lens CSS 1
Image Zoom lens CSS 2
Image Zoom lens CSS 3

On the author

Administrator Mtpanorama

    3 commentaries until now

    UnaiPublicado in 9:50 a.m. - Julio 6, 2017

    Thank you very much! very useful and explained well

    IxonePublicado in 7:07 p.m. - Julio 22, 2017

    very good contribution! thanks!

    Jose corderoPublicado in 2:43 a.m. - Abr 18, 2020

    Brilliant its contribution. Venezuelan from Chile thanks for it warmly to you. Explained very well

    He leaves a commentary