Responsive images

  • Hello,

    I often see this cool effect: When you put your mouse on a specific photo, suddently it starts to zoom in slowly, it’s like a kind of kent burn effect but not on sliders but on an image gallery. Does someone know which plugin I should use?

    E.G of the effect I’m looking for: https://louyetu.fr/fr

    Thank you in advance for your help.

    Melissa Kerr

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator cubecolour

    (@numeeja)

    This can be achieved with some CSS and an additional html element such as a wrapping div around each image and using a scale transform.

    I used the following CSS recently on a project to achieve this effect –after adding a div with the class img-wrap around each image element I was targetting:

    
.img-wrap {
	top: 0;
	left: 0;
	display: inline-block;
	width: auto;
	height: 100%;
	position: relative;
	transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	overflow: hidden;
}

.img-wrap img {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	display: block;
	margin-bottom: 0!important;
}

.img-wrap img:hover {
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
	overflow: hidden;
}

    If the images are each inside an anchor tag with no other elements inside the anchor, and the anchors have a classname which can be targetted, it should be possible to use the existing anchor tag instead of the wrapping div

    Moderator cubecolour

    (@numeeja)

    I have just done a test with a gallery and the images are already wrapped with a ‘gallery-icon’ div. so the above styles can be ammended to target this as the wrapping div:

    
.gallery-icon {
	top: 0;
	left: 0;
	display: inline-block;
	width: auto;
	height: 100%;
	position: relative;
	transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	overflow: hidden;
}

.gallery-icon img {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	display: block;
	margin-bottom: 0!important;
}

.gallery-icon img:hover {
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
	overflow: hidden;
}
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Responsive images’ is closed to new replies.