Test hover

Developer
Esambino Wei Cheng Hsieh
Size
2,616 Kb
Views
4,048
  1. Test hover Previews
  2. Test hover HTML Codes
  3. Test hover CSS Codes

How do I make an test hover?

What is a test hover? How do you make a test hover? This script and codes were developed by Esambino Wei Cheng Hsieh on 07 January 2023, Saturday.

Test hover Previews
IQ Test

Test hover - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>test hover</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <figure class="frame">
<div class="pat"> <div class="block small"></div> <div class="block medium"></div> <div class="block large"></div> <div class="block big"></div> <img src="#" /> </div> <figcaption class="info"> <h3> Wei-Cheng Hsieh </h3> <p>Hello!<br /> I'm a weekend Barista at Cafe Lakulaku &<br /> freelance Front-End Web Designer.<br /> I'm from Taipei, Taiwan.<br /> I love Interaction/UI Design, Rock/Alternative/Disco/Ambient Music,<br /> Movie, Animation & "Iced" Coffee. <br/> <br/>Contact:<br/><a href="" class="link"> [email protected]</a> </p> </figcaption>
</figure>
</body>
</html>

Test hover - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300);
body { text-align:center; background: #222; font-family: 'Source Sans Pro', sans-serif; font-size:1.1rem; font-weight:300; line-height:1.6rem;
}
.frame,
.frame:before,
.frame .info,
.info > p,
.button { display:block;
}
.frame:before,
.frame .info,
h3,
.info > p,
.button { position:absolute;
}
.frame { position:relative; width:800px; height:450px; margin: 5% auto; background-color: #222; cursor: pointer;
}
.pat { margin-top: 15%; margin-left: 70%; position: absolute;
}
img { margin-top: 30px; margin-left: -10px; width: 200px; position: absolute; z-index: 2;
}
.block { width: 130px; height: 130px; background-img: url(https://3.bp.blogspot.com/-xFCritoeIwQ/UiPu_k4M2yI/AAAAAAAAA7I/2ksl8O29-R8/s320/%E7%9B%B8%E7%89%87+13-6-16+%E4%B8%8A%E5%8D%888+31+31.jpg); background-repeat: no-repeat; border-radius: 50%; position: absolute;
}
.small { margin-top: 15px; margin-left: 5px; border: 15px solid #fff; z-index: 6;
}
.medium { margin-top: 0px; margin-left: -10px; border: 30px solid #01010; z-index: 5;
}
.large { margin-top: -15px; margin-left: -25px; border: 45px solid #222; z-index: 4;
}
.big { margin-top: -30px; margin-left: -40px; border: 60px solid #222; z-index: 3;
}
.info { bottom: 15px; left:30px; -webkit-box-sizing:border-box; box-sizing:border-box; width:400px; height:80px; overflow:hidden; -webkit-transition:height 0.3s 0.5s; transition: height 0.3s 0.5s;
}
.frame:hover > .info { height:450px; -webkit-transition:height 0.3s; transition: height 0.3s;
}
h3 { top:0px; left:0px; width:100%; background-color: #222; color: #222; font-size:1.5rem; font-weight:300; text-transform:uppercase; letter-spacing:2px; line-height:50px; z-index:333;
}
.frame:hover .info h3 { color: #222; background-color: white;
}
p { overflow:hidden; line-height:36px; top:10px; left:0px; height:0px; padding:0px 15px 30px 15px; background:rgba(255,255,255,0.3); text-align:left; z-index:222; -webkit-transition:height 0.2s, padding 0.2s, background 0.2s; transition:height 0.2s, padding 0.2s, background 0.2s;
}
.frame:hover > .info > p { height:400px; padding:65px 15px 30px 15px; background: #f0f0f0; opacity: 0.75; -webkit-transition:height 0.3s 0.6s, padding 0.3s 0.6s, background 1.1s 1.2s; transition:height 0.3s 0.6s, padding 0.3s 0.6s, background 1.1s 1.2s;
}
.link { text-decoration:none; color: #2183c4;
}
@-webkit-keyframes blurout { 0% {-webkit-filter: blur(3px);filter: blur(3px);} 100% {-webkit-filter: blur(0px);filter: blur(0px);}
}
@-webkit-keyframes blurin { 0% {-webkit-filter: blur(0px);filter: blur(0px);} 100% {-webkit-filter: blur(3px);filter: blur(3px);}
}
Test hover - Script Codes
Test hover - Script Codes
Home Page Home
Developer Esambino Wei Cheng Hsieh
Username Esambino
Uploaded January 07, 2023
Rating 3
Size 2,616 Kb
Views 4,048
Do you need developer help for Test hover?

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!

Esambino Wei Cheng Hsieh (Esambino) Script Codes
Name
Slap
Gdf
Css3 slider
Blank
Tribute to Rorschach
Colorful card
Three test
Practice hover
Present Box
Svg effect practice
Create amazing Facebook ads 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!