How to create turn effect on images/gallery/portfolio

  • Hello,

    It’s not been long enough since I started using DIVI for creating a website for the company I’m working for.

    I found this website (created with DIVI too0:

    https://10minuteschool.com/

    Please, I would love to know how to create the same structure and turning/flipping effect of the 8 images appearing on the very top of the page.

    It would be great if you could give me a hand with this.
    Thanks a lot for your time and consideration.

    Kind regards,
    Carlota Huelva.

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hi Carlota,

    Are you using bootstrap on your website? I think I can lend you a hand on this ??

    Thread Starter lota1989

    (@lota1989)

    HI!!!! ?? Thanks for answering!

    Nope, I′m not using that. I′m VERY new using wordpress, its the Divi one I′m using… I didn′t even choose it… It′s the one that has been selected by the boss to create the website I′m working on… meh

    Hello Carlota ??

    I can’t dig in much deeper to the grid system of your Divi theme. Nevertheless, this could do the trick for the flipping effect of 8 images. Hope you could make it work ??

    <!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="https://cdn.elegantthemes.com/style.css?ver=4.2">
	<style>
		.flip3D {
			width:200px;
			height:200px;
			margin:10px;
			float:left;
		}
		.flip3D > .front {
			position:absolute;
			-webkit-transform: perspective( 600px ) rotateY( 0deg );
			transform: perspective( 600px ) rotateY( 0deg );
			background:#ff0000;
			width:200px;
			height:200px;
			border-radius: 10px;
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			transition: -webkit-transform .5s linear 0s;
			transition: transform .5s linear 0s;
		}
		.flip3D > .back{
			position:absolute;
			-webkit-transform: perspective( 600px ) rotateY( 180deg );
			transform: perspective( 600px ) rotateY( 180deg );
			background: #ffff00;
			width:200px;
			height:200px;
			border-radius: 10px;
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			transition: -webkit-transform .5s linear 0s;
			transition: transform .5s linear 0s;
		}
		.flip3D:hover > .front{
			-webkit-transform: perspective( 600px ) rotateY( -180deg );
			transform: perspective( 600px ) rotateY( -180deg );
		}
		.flip3D:hover > .back{
			-webkit-transform: perspective( 600px ) rotateY( 0deg );
			transform: perspective( 600px ) rotateY( 0deg );
		}
		.flip3D img {
			width: 100%;
			height: 100%;
			border-radius: 10px;
		}
		.flip3D span {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translateX(-50%) translateY(-50%);
		}
		.outer {
			width: 80%;
			margin: 0 auto;
		}
		.inner  {
			width: 80% ;
			margin: 0 auto;
			display: block;
		}
	</style>
</head>
<body>
	<div class="outer">
		<div class="inner">
			<div class="flip3D">
				<div class="back"><span>BACK1</span></div>
				<div class="front"><span>FRONT1</span></div>
			</div>
			<div class="flip3D">
				<div class="back"><span>BACK2</span></div>
				<div class="front"><span>FRONT2</span></div>
			</div>
			<div class="flip3D">
				<div class="back"><span>BACK3</span></div>
				<div class="front"><span>FRONT3</span></div>
			</div>
			<div class="flip3D">
				<div class="back"><span>BACK4</span></div>
				<div class="front"><span>FRONT4</span></div>
			</div>
		</div>
	</div>
	<div class="outer">
		<div class="inner">
			<div class="flip3D">
				<div class="back"><img src="https://secure.gravatar.com/avatar/d0c8b5783d3a10e703abed514dd92c70?s=48&r=g&d=monsterid"></div>
				<div class="front"><img src="https://www.gravatar.com/avatar/d0c8b5783d3a10e703abed514dd92c70?s=150&r=g&d=mm"></div>
			</div>
			<div class="flip3D">
				<div class="back"><img src="https://secure.gravatar.com/avatar/d0c8b5783d3a10e703abed514dd92c70?s=48&r=g&d=monsterid"></div>
				<div class="front"><img src="https://www.gravatar.com/avatar/d0c8b5783d3a10e703abed514dd92c70?s=150&r=g&d=mm"></div>
			</div>
			<div class="flip3D">
				<div class="back"><img src="https://secure.gravatar.com/avatar/d0c8b5783d3a10e703abed514dd92c70?s=48&r=g&d=monsterid"></div>
				<div class="front"><img src="https://www.gravatar.com/avatar/d0c8b5783d3a10e703abed514dd92c70?s=150&r=g&d=mm"></div>
			</div>
			<div class="flip3D">
				<div class="back"><img src="https://secure.gravatar.com/avatar/d0c8b5783d3a10e703abed514dd92c70?s=48&r=g&d=monsterid"></div>
				<div class="front"><img src="https://www.gravatar.com/avatar/d0c8b5783d3a10e703abed514dd92c70?s=150&r=g&d=mm"></div>
			</div>
		</div>
	</div>
</body>
</html>

    Hello Carlota ??

    I can’t dig in much deeper to the grid system of your Divi theme. Nevertheless, this code could do the trick for the flipping effect of 8 images. Hope you could make it work ??

    Thread Starter lota1989

    (@lota1989)

    Hello Ruby,

    I’m at work just now, working on the website.
    I have just tried to copy the code u sent me and doesn’t seem to be working. It’s probably me, doing something wrong… lol

    Thanks a lot for your time and help though!!!

    Going to keep trying to solve this ??

    Copy the css code on your stylsheet then tweak the html code according to the grid system of your theme. Just don’t forget the classes that is controlling the flip effect. Goodluck Carlota ??

    Thread Starter lota1989

    (@lota1989)

    Thank you so much!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How to create turn effect on images/gallery/portfolio’ is closed to new replies.