Animated Cover

Developer
Mojtaba Seyedi
Size
3,576 Kb
Views
36,432
  1. Animated Cover Previews
  2. Animated Cover HTML Codes
  3. Animated Cover CSS Codes
  4. Animated Cover JS Codes

How do I make an animated cover?

Which # do you prefer ?. What is a animated cover? How do you make a animated cover? This script and codes were developed by Mojtaba Seyedi on 27 July 2022, Wednesday.

Animated Cover Previews
IQ Test

Animated Cover - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated Cover</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="bg-items"> <div class="items" style="background-image : url('http://oi68.tinypic.com/2mgscwo.jpg');"> <div class="one"></div> <div class="details"> <h3>#1</h3> <p>this is a description for your photo in your gallery.</p> <h6>time &amp; date</h6> </div> </div> </div> <div class="bg-items"> <div class="items" style="background-image : url('http://oi68.tinypic.com/2mgscwo.jpg');"> <div class="two"></div> <div class="details"> <h3>#2</h3> <p>this is a description for your photo in your gallery.</p> <h6>time &amp; date</h6> </div> </div> </div> <div class="bg-items"> <div class="items" style="background-image : url('http://oi68.tinypic.com/2mgscwo.jpg');"> <div class="three"></div> <div class="details"> <h3>#3</h3> <p>this is a description for your photo in your gallery.</p> <h6>time &amp; date</h6> </div> </div> </div> <div class="bg-items"> <div class="items" style="background-image : url('http://oi68.tinypic.com/2mgscwo.jpg');"> <div class="four"></div> <div class="details"> <h3>#4</h3> <p>this is a description for your photo in your gallery.</p> <h6>time &amp; date</h6> </div> </div> </div> <div class="bg-items"> <div class="items" style="background-image : url('http://oi68.tinypic.com/2mgscwo.jpg');"> <div class="tl5"></div> <div class="br5"></div> <div class="details"> <h3>#5</h3> <p>this is a description for your photo in your gallery.</p> <h6>time &amp; date</h6> </div> </div> </div> <div class="bg-items"> <div class="items" style="background-image : url('http://oi68.tinypic.com/2mgscwo.jpg');"> <div class="tl6"></div> <div class="tr6"></div> <div class="bl6"></div> <div class="br6"></div> <div class="details"> <h3>#6</h3> <p>this is a description for your photo in your gallery.</p> <h6>time &amp; date</h6> </div> </div> </div> <div class="bg-items"> <div class="items" style="background-image : url('http://oi68.tinypic.com/2mgscwo.jpg');"> <div class="seven"></div> <div class="details"> <h3>#7</h3> <p>this is a description for your photo in your gallery.</p> <h6>time &amp; date</h6> </div> </div> </div> <div class="bg-items"> <div class="items" style="background-image : url('http://oi68.tinypic.com/2mgscwo.jpg');"> <div class="eight"></div> <div class="details"> <h3>#8</h3> <p>this is a description for your photo in your gallery.</p> <h6>time &amp; date</h6> </div> </div> </div> <div class="bg-items"> <div class="items" style="background-image : url('http://oi68.tinypic.com/2mgscwo.jpg');"> <div class="nine"></div> <div class="details"> <h3>#9</h3> <p>this is a description for your photo in your gallery.</p> <h6>time &amp; date</h6> </div> </div> </div> <div class="bg-items"> <div class="items" style="background-image : url('http://oi68.tinypic.com/2mgscwo.jpg');"> <div class="ten i"></div> <div class="ten ii"></div> <div class="ten iii"></div> <div class="ten iv"></div> <div class="details"> <h3>#10</h3> <p>this is a description for your photo in your gallery.</p> <h6>time &amp; date</h6> </div> </div> </div> <div class="bg-items"> <div class="items" style="background-image : url('http://oi68.tinypic.com/2mgscwo.jpg');"> <div class="eleven i"></div> <div class="eleven ii"></div> <div class="eleven iii"></div> <div class="eleven iv"></div> <div class="details"> <h3>#11</h3> <p>this is a description for your photo in your gallery.</p> <h6>time &amp; date</h6> </div> </div> </div> <div class="bg-items"> <div class="items" style="background-image : url('http://oi68.tinypic.com/2mgscwo.jpg');"> <div class="twelve i"></div> <div class="twelve ii"></div> <div class="twelve iii"></div> <div class="twelve iv"></div> <div class="details"> <h3>#12</h3> <p>this is a description for your photo in your gallery.</p> <h6>time &amp; date</h6> </div> </div> </div> <div class="bg-items"> <div class="items" style="background-image : url('http://oi68.tinypic.com/2mgscwo.jpg');"> <div class="thirteen-l"></div> <div class="thirteen-r"></div> <div class="details"> <h3>#13</h3> <p>this is a description for your photo in your gallery.</p> <h6>time &amp; date</h6> </div> </div> </div> <div class="bg-items"> <div class="items" style="background-image : url('http://oi68.tinypic.com/2mgscwo.jpg');"> <div class="fourteen-l"></div> <div class="fourteen-r"></div> <div class="details"> <h3>#14</h3> <p>this is a description for your photo in your gallery.</p> <h6>time &amp; date</h6> </div> </div> </div> <div class="bg-items"> <div class="items" style="background-image : url('http://oi68.tinypic.com/2mgscwo.jpg');"> <div class="t"></div> <div class="r"></div> <div class="b"></div> <div class="l"></div> <div class="details"> <h3>#15</h3> <p>this is a description for your photo in your gallery.</p> <h6>time &amp; date</h6> </div> </div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Animated Cover - Script Codes CSS Codes

body { background-color: #E43;
}
.container { width : 960px; margin : 0 auto;
}
.container:after{ clear : both; display : table; content : '';
}
.bg-items { padding: 20px; width : 240px; height : 160px; margin : 20px; background-color: white; float : left; cursor : pointer; box-shadow : 3px 3px 5px 0px rgba(0,0,0,0.5);
}
.items { width : 240px; height : 160px; position: relative; overflow: hidden; background-color: #102B46; background-size: cover;
}
.details { background-color : rgba(0,0,0,0.5); width : 220px; height : 140px; padding : 10px; top : 0; left: 0; font-family : georgia; color : #fff; opacity : 0; -webkit-transition: opacity .8s; transition : opacity .8s;
}
.details h3 { margin-bottom : 20px;
}
.details h6 { text-align : right; margin-top : 40px;
}
.details p { font-size : 14px; font-style: italic; text-align: center; line-height : 20px;
}
.items:hover .details { opacity : 1; -webkit-transition: opacity .2s .3s; transition : opacity .2s .3s;
}
.items div { position : absolute;
}
/* one */
.one { left : 100%; bottom : 100%; width : inherit; height: inherit; background-color : #e43; -webkit-transition: all .3s; transition : all .3s;
}
.items:hover .one { -webkit-transition: all .3s; transition : all .3s; left : 0; bottom : 0;
}
/* two */
.two { width : inherit; height: inherit; background-color : #e43; -webkit-transition: all .3s; transition : all .3s; left : 0; bottom : 100%;
}
.items:hover .two { -webkit-transform : rotate(180deg); transform : rotate(180deg); left : 0; bottom : 0; -webkit-transition: all .3s; transition : all .3s;
}
/* three */
.three { left : 0; top : 0; width : inherit; height: inherit; background-color : #e43; -webkit-transition: all .3s; transition : all .3s; -webkit-transform: scale(0,0); transform: scale(0,0);
}
.items:hover .three { left : 0; top : 0; -webkit-transform : scale(1,1); transform : scale(1,1); -webkit-transition: all .3s; transition : all .3s;
}
/* four */
.four { width : inherit; height: inherit; background-color : #e43; -webkit-transition: all .3s; transition : all .3s; left : 0; top : 0; -webkit-transform: scale(0,0) rotate(0deg); transform: scale(0,0) rotate(0deg);
}
.items:hover .four { left : 0; top : 0; -webkit-transform: scale(1,1) rotate(1080deg); transform: scale(1,1) rotate(1080deg); -webkit-transition: all .3s; transition : all .3s;
}
/* five */
.tl5 { border-top : 161px solid #e43; border-right : 241px solid transparent; top : -160px; left : -240px; -webkit-transition: all .3s; transition : all .3s;
}
.br5 { border-bottom : 161px solid #e43; border-left : 241px solid transparent; bottom : -160px; right : -240px; -webkit-transition: all .3s; transition : all .3s;
}
.items:hover .tl5 { top : 0; left : 0; -webkit-transition: all .3s; transition : all .3s;
}
.items:hover .br5 { bottom : 0; right : 0; -webkit-transition: all .3s; transition : all .3s;
}
/* six */
.tl6 { width : 120px; height : 80px; background-color: #e43; top : -80px; left : -240px; -webkit-transition: all .3s; transition : all .3s;
}
.tr6 { width : 120px; height : 80px; background-color: #e43; top : -80px; right : -240px; -webkit-transition: all .3s; transition : all .3s;
}
.br6 { width : 120px; height : 80px; background-color: #e43; bottom: -80px; right : -240px; -webkit-transition: all .3s; transition : all .3s;
}
.bl6 { width : 120px; height : 80px; background-color: #e43; bottom : -80px; left : -240px; -webkit-transition: all .3s; transition : all .3s;
}
.items:hover .tl6 { top : 0; left : 0; -webkit-transition: all .3s; transition : all .3s;
}
.items:hover .tr6 { top : 0; right : 0; -webkit-transition: all .3s; transition : all .3s;
}
.items:hover .br6 { bottom : 0; right : 0; -webkit-transition: all .3s; transition : all .3s;
}
.items:hover .bl6 { bottom : 0; left : 0; -webkit-transition: all .3s; transition : all .3s;
}
/* seven */
.seven { width : 240px; height : 160px; background-color : #e43; opacity : 0; -webkit-transition: all .3s; transition : all .3s;
}
.items:hover .seven { opacity : 1; -webkit-transition: all .3s; transition : all .3s;
}
/* eight */
.eight { top : 30%; left : 10%; border-right : 100px solid transparent; border-bottom : 70px solid #e43; border-left : 100px solid transparent; -webkit-transform: rotate(35deg) scale(0,0); transform: rotate(35deg) scale(0,0); -webkit-transition: all .6s; transition : all .6s;
}
.eight:before { border-bottom: 80px solid #e43; border-left : 30px solid transparent; border-right : 30px solid transparent; position: absolute; height: 0; width: 0; top: -45px; left: -65px; display: block; content: ''; -webkit-transform: rotate(-35deg); transform: rotate(-35deg);
}
.eight:after { position: absolute; display: block; color: #e43; top: 3px; left: -105px; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid #e43; border-left: 100px solid transparent; -webkit-transform: rotate(-70deg); transform: rotate(-70deg); content: '';
}
.items:hover .eight { -webkit-transform: rotate(35deg) scale(3.5,3.5); transform: rotate(35deg) scale(3.5,3.5); -webkit-transition: all .6s; transition : all .6s;
}
/* nine */
.nine { width : 0; height: 0; top : 50%; left : 50%; background-color: #e43; border-radius : 50%; -webkit-transition: all .3s; transition : all .3s;
}
.items:hover .nine { width : 340px; height: 260px; top : -50px; left : -50px; -webkit-transition: all .6s; transition : all .6s;
}
/* ten */
.ten { width : inherit; height : 40px; background-color: #e43; left : 100%;
}
.ten.i { top : 0; -webkit-transition: all .2s; transition : all .2s;
}
.ten.ii { top : 40px; -webkit-transition: all .4s; transition : all .4s;
}
.ten.iii { top : 80px; -webkit-transition: all .6s; transition : all .6s;
}
.ten.iv { top : 120px; -webkit-transition: all .8s; transition : all .8s;
}
.items:hover .i { left : 0; -webkit-transition: all .2s; transition : all .2s;
}
.items:hover .ii { left : 0; -webkit-transition: all .4s; transition : all .4s;
}
.items:hover .iii { left : 0; -webkit-transition: all .6s; transition : all .6s;
}
.items:hover .iv { left : 0; -webkit-transition: all .8s; transition : all .8s;
}
/* eleven */
.eleven { width : inherit; height : 40px; background-color: #e43; -webkit-transition: all .3s; transition : all .3s;
}
.eleven.i { top : 0; left : -100%;
}
.eleven.ii { top : 40px; left : 100%;
}
.eleven.iii { top : 80px; left : -100%;
}
.eleven.iv { left : 100%; top : 120px;
}
.items:hover .eleven { left : 0; -webkit-transition: all .4s ; transition : all .4s ;
}
/* twelve */
.twelve { width : inherit; height : 40px; background-color: #e43; -webkit-transition: all .3s; transition : all .3s; top : -40px;
}
.twelve.iv { -webkit-transition: all .1s; transition : all .1s;
}
.twelve.iii { -webkit-transition: all .1s .1s; transition : all .1s .1s;
}
.twelve.ii { -webkit-transition: all .1s .2s; transition : all .1s .2s;
}
.twelve.i { -webkit-transition: all .1s .3s; transition : all .1s .3s;
}
.items:hover .twelve.i { top : 120px; -webkit-transition: all .2s; transition : all .2s;
}
.items:hover .twelve.ii { top : 80px; -webkit-transition: all .2s .2s ; transition : all .2s .2s ;
}
.items:hover .twelve.iii { top : 40px; -webkit-transition: all .2s .4s ; transition : all .2s .4s ;
}
.items:hover .twelve.iv { top : 0px; -webkit-transition: all .2s .6s; transition : all .2s .6s;
}
/* thirteen */
.thirteen-r , .thirteen-l{ width : 120px; height: inherit; background-color : #e43; top : 0; -webkit-transition: all .3s; transition : all .3s;
}
.thirteen-r { left : 100%;
}
.thirteen-l { right : 100%;
}
.items:hover .thirteen-r { -webkit-transition: all .3s; transition : all .3s; left : 0;
}
.items:hover .thirteen-l { -webkit-transition: all .3s; transition : all .3s; right : 0;
}
/* fourteen */
.fourteen-r , .fourteen-l{ width : 120px; height: inherit; background-color : #e43; top : 0; -webkit-transition: all .3s; transition : all .3s;
}
.fourteen-r { left : 100%;
}
.fourteen-l { right : 100%;
}
.items:hover .fourteen-r { -webkit-transition: all .3s; transition : all .3s; left : 50%;
}
.items:hover .fourteen-l { -webkit-transition: all .3s; transition : all .3s; right : 50%;
}
/* fifteen */
.t { border-style : solid; border-width : 84px 120px 0 120px; border-color : #e43 transparent transparent transparent; -webkit-transition: all .3s; transition : all .3s; top : -84px;
}
.r { border-style : solid; border-width : 81px 120px 81px 0; border-color : transparent #e43 transparent transparent; right : -120px; -webkit-transition: all .3s; transition : all .3s;
}
.b { border-style : solid; border-width : 0 121px 81px 121px; border-color : transparent transparent #e43 transparent; bottom : -80px; -webkit-transition: all .3s; transition : all .3s;
}
.l { border-style : solid; border-width : 81px 0 81px 120px; border-color : transparent transparent transparent #e43; left : -120px; -webkit-transition: all .3s; transition : all .3s;
}
.items:hover .t { top : 0px; -webkit-transition: all .3s; transition : all .3s;
}
.items:hover .r { right : 0px; -webkit-transition: all .3s; transition : all .3s;
}
.items:hover .b { bottom : 0px; -webkit-transition: all .3s; transition : all .3s;
}
.items:hover .l { left : 0px; -webkit-transition: all .3s; transition : all .3s;
}

Animated Cover - Script Codes JS Codes

/*
Which one do you prefer?
*/
Animated Cover - Script Codes
Animated Cover - Script Codes
Home Page Home
Developer Mojtaba Seyedi
Username seyedi
Uploaded July 27, 2022
Rating 4
Size 3,576 Kb
Views 36,432
Do you need developer help for Animated Cover?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mojtaba Seyedi (seyedi) Script Codes
Name
FUN
Funny toggle switch
Toggle menu
Button
Bell alert
Flock Login
Hidden navigation
Single element cloud
Animated Covers
A Pen by Mojtaba Seyedi
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!