Circle Gallery Animation effect with content | HTML & Pure CSS
In this tutorial, we learn how to create a circle Gallery Animation Effect? I hope you have seen a circle gallery on many websites if you don’t have seen let me explain, therefore I will create a circle gallery with beautiful images and hover effect animation.
here, I have taken six circle boxes with content and heading when I will hover on every circle, then circle images will hide, heading and paragraph content will show in a circle shape.
therefore, in the multiple websites, you have seen the different effects on a circle hover, such as zoom in, zoom out, etc. furthermore, here I will use content effect on hover the circle box.
therefore, you can mention related topics heading and little bites of paragraph summary, you can also be used a hyperlink to show more content, suppose that if you used hyperlink when you click on link the large content paragraph will open in the next tab.
you can be used this circle gallery Animation effect on your website as you need. after a few changes in the code segment, I hope you will enjoy this program.
Therefore, to create this program I have used HTML and Pure CSS, there is no need to used JavaScript and jquery, you can easily design and developed with HTML and CSS properties.
Therefore, you can change the circle size and the number of the circle in a row, such as according to your need reduced the circle size and use more than three circle in a single row.
as a result, you can see the preview on the given view demo button. I hope after seeing the demo you can understand the circle gallery design and hover effects, which I have designed.
Explanation of Source Code for Circle Gallery Animation Effect
Let’s discuss the source code which I have used to create this program, First, I have used class="mainbox" with CSS properties such as position:absolute; width:100%; max-width:950px; max-height: 950px; display:flex; etc.
after that, I have taken another class="circle-section" which I have used eight times for every circle, for this class I have used CSS properties such as flex, flex-basis, flex-grow, height, background, border, box-shadow, cursor, transition, overflow, position, border-radius.
furthermore, for circle images, I have used
|
1 2 3 4 5 6 |
.circle-section img{ width: 100%; height:100%; transition: all .1s cubic-bezier(.8,.5,.2,1.4); border-radius: 50%; } |
therefore, on hover which content and heading will show, here I have used class="descriptions" with some CSS properties such as position: absolute; top:0px; left:0px; width:100%; height:100%; padding:20px; box-sizing:border-box; border-radious:50%; etc.
everything here we can not explain in detail, I hope you getting the source code you can understand in a better way, In stylesheet which CSS properties I have used you will be familiar and understand easily.
see the given below source code if you have any problem to understand comment me given below comment box, I will resolve the problem where you are facing the problem.
Therefore, to create this program I have used Two files such as the first file for HTML and another file for CSS, I hope you will enjoy this program if you want to use this circle gallery you can use after few changes in the source code according to your need.
Step First: Create HTML file as name “index.html” | Change Filename as you want
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Circle Gallery</title> <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/stylesheet.css"> </head> <body> <div class="mainbox"> <div class="circle-section"> <img src="img/attractive-beautiful-beauty-1007007.jpg"> <div class="descriptions"> <h1>Heading</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a ipsum est. Etiam vehicula elit eget turpis faucibus placerat. </p> </div> </div> <div class="circle-section"> <img src="img/beautiful-woman-brunette-casual-wear-2395736.jpg"> <div class="descriptions"> <h1>Heading</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a ipsum est. Etiam vehicula elit eget turpis faucibus placerat. </p> </div> </div> <div class="circle-section"> <img src="img/action-animal-athlete-1524620.jpg"> <div class="descriptions"> <h1>Heading</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a ipsum est. Etiam vehicula elit eget turpis faucibus placerat. </p> </div> </div> <div class="circle-section" style="margin-top: 10%"> <img src="img/alone-beautiful-eyes-beautiful-woman-2994590.jpg"> <div class="descriptions"> <h1>Heading</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a ipsum est. Etiam vehicula elit eget turpis faucibus placerat.</p> </div> </div> <div class="circle-section" style="margin-top: 10%"> <img src="img/attractive-beautiful-beauty-2940418.jpg"> <div class="descriptions"> <h1>Heading</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a ipsum est. Etiam vehicula elit eget turpis faucibus placerat. </p> </div> </div> <div class="circle-section" style="margin-top: 10%"> <img src="img/adult-alluring-attractive-2879201.jpg"> <div class="descriptions"> <h1>Heading</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a ipsum est. Etiam vehicula elit eget turpis faucibus placerat. </p> </div> </div> </div> </body> </html> |
Second Step: Create CSS file As name “stylesheet.css” | Change File name as you want
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
body{ background-color: #212121; padding: 0px; margin:0px; width:100%; height:100vh; font-family: 'Lato', sans-serif; } .mainbox{ position: absolute; top:30%; bottom: 30%; left:50%; transform: translate(-50%, -50%); width:100%; max-width: 950px; max-height: 950px; height:auto; display: flex; flex-wrap: wrap; justify-content: space-between; border-radius: 50%; } .circle-section{ flex: 1; flex-basis: 272px; flex-grow: 0; height: 272px; background: #fff; border: 2px solid #fff; box-shadow: 0px 4px 7px rgba(0,0,0,.5); cursor: pointer; transition: all .1s cubic-bezier(.8,.5,.2,1.4); overflow: hidden; position: relative; border-radius: 50%; } .circle-section img{ width: 100%; height:100%; transition: all .1s cubic-bezier(.8,.5,.2,1.4); border-radius: 50%; } .descriptions{ position: absolute; top:0px; left:0px; background-color: rgba(255,255,255,.7); width:100%; height:100%; transition: all .1s ease-in-out; padding: 20px; box-sizing: border-box; clip-path: circle(0% at 100% 100%); border-radius: 50%; } .circle-section:hover .descriptions{ left:0px; transition: all .1s ease-in-out; clip-path: circle(75%); } .circle-section:hover{ transition: all .2s cubic-bezier(.8,.5,.2,1.4); box-shadow: 0px 2px 3px rgba(0,0,0,.3); transform: scale(1.2); z-index: 9999; } .circle-section:hover img{ transition: all .2s cubic-bezier(.8,.5,.2,1.4); transform: scale(2); filter: blur(4px); } .circle-section h1{ color: #5cb85c; letter-spacing: 1px; margin: 0px; text-align: center; font-size: 24px; } .circle-section p{ line-height: 24px; height: 70%; padding: 3%; text-align: center; text-align: justify; font-size: 18px; } .circle-section button:hover{ transform: scale(1.2); transition: all .1s ease-in-out; } |
you have to face any trouble then comment me down below. I will try to resolve the problem as soon as possible. thanks for viewing these posts.
About Author
