How to add template in codeigniter |how to create template in codeigniter| template in codeigniter 4
Hi peoples, Today in this article I am going to show you some magic effect you can apply in your project images. The effect is 3d. So it is a great effect. I hope you like it. Let’s start,
You all know how to select imagename from database and the image file from file directory regarding the name.
First select data and next add some CSS codes that are use foe animation with a beautiful looks.
So follow the code
View Page:
<div id="carousel"> <?php include 'dbconnect.php'; $select_query = mysqli_query($con,"SELECT * FROM Table Name ORDER BY id DESC LIMIT 8"); while($select_image = mysqli_fetch_assoc($select_query)){ ?> <figure><img src="admin_panel/uploads/festival_celebrations/<?php echo $select_image['image_file']; ?>" alt="" class="nesfesimg1"></figure> <?php } ?> </div>
CSS:
#carousel{ margin-left: 17%; width: 70%; height: 100%; position: absolute; transform-style: preserve-3d; animation: rotation 25s infinite linear; } #carousel:hover{ animation-play-state: paused; } #carousel figure{ display: block; position: absolute; width: 90%; height: 50%px; left: 10px; top: 10px; } #carousel figure:nth-child(1){transform: rotateY(0deg) translateZ(288px);} #carousel figure:nth-child(2) { transform: rotateY(40deg) translateZ(288px);} #carousel figure:nth-child(3) { transform: rotateY(80deg) translateZ(288px);} #carousel figure:nth-child(4) { transform: rotateY(120deg) translateZ(288px);} #carousel figure:nth-child(5) { transform: rotateY(160deg) translateZ(288px);} #carousel figure:nth-child(6) { transform: rotateY(200deg) translateZ(288px);} #carousel figure:nth-child(7) { transform: rotateY(240deg) translateZ(288px);} #carousel figure:nth-child(8) { transform: rotateY(280deg) translateZ(288px);} #carousel figure:nth-child(9) { transform: rotateY(320deg) translateZ(288px);} #carousel figure img{ -webkit-filter: grayscale(0); cursor: pointer; transition: all .5s ease; } #carousel figure img:hover{ -webkit-filter: grayscale(0); transform: scale(1.2,1.2); } @keyframes rotation{ from{ transform: rotateY(0deg); } to{ transform: rotateY(360deg); } }
Related posts