Responsive Section hover effect to show content
How do I make an responsive section hover effect to show content?
Responsive Hover effect to give brief details of each section. . What is a responsive section hover effect to show content? How do you make a responsive section hover effect to show content? This script and codes were developed by Jitendra on 04 July 2022, Monday.
Responsive Section hover effect to show content - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Section hover effect to show content</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Roboto+Slab'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="section">
<section>
<div class="slidertp"><title>About Us</title></div>
<p>
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
</p>
<div class="sliderbt"><title>About Us</title></div>
</section>
<section>
<div class="crosstp"><title>Experties</title></div>
<p>
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
</p>
<div class="crossbt"></div>
</section>
<section>
<div class="slidertprd"><title>Services</title></div>
<p>
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
</p>
<div class="sliderbtrd"><title>Services</title></div>
</section>
<section>
<div class="crosstp"><title>About Us</title></div>
<p>
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
</p>
<div class="crossbt"></div>
</section>
<section>
<div class="slidertp"><title>Experties</title></div>
<p>
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
</p>
<div class="sliderbt"><title>Experties</title></div>
</section>
<section>
<div class="crosstp"><title>Services</title></div>
<p>
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
</p>
<div class="crossbt"></div>
</section>
<section>
<div class="slidertprd"><title>About Us</title></div>
<p>
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
</p>
<div class="sliderbtrd"><title>About Us</title></div>
</section>
<section>
<div class="slidertp"><title>Services</title></div>
<p>
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
</p>
<div class="sliderbt"><title>Services</title></div>
</section>
<section>
<div class="slidertprd"><title>Experties</title></div>
<p>
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
</p>
<div class="sliderbtrd"><title>Experties</title></div>
</section>
</div>
</body>
</html>
Responsive Section hover effect to show content - Script Codes CSS Codes
.section{width:60%; Margin:0 auto;text-align:center;}
section
{
display:inline-block;
width:230px;
border:1px solid #ccc;
position:relative;
overflow:hidden;
margin-right:10px;
margin-bottom:20px;
-moz-transition:all 0.5s ease;
-webkit-transition:all 0.5s ease;
-ms-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
transition:all 0.5s ease;
}
title
{
font-family:Roboto Slab;
font-size:2em;
color:#fff;
position:absolute;
display:block;
bottom:-20px;
text-align:center;
width:100%;
}
p
{
font-size:0.8em;
font-family:Roboto Slab;
text-align:justify;
padding:0px 10px;
}
.slidertp
{
position:absolute;
width:100%;
height:50%;
left:0px;
top:0px;
background:#fff;
overflow:hidden;
background:rgb(76, 182, 194);
-moz-transition:all 0.5s linear;
-webkit-transition:all 0.5s linear;
-ms-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
transition:all 0.5s linear;
}
.slidertp title{bottom:-20px;}
.sliderbt
{
position:absolute;
width:100%;
height:50%;
left:0px;
bottom:0px;
background:rgb(76, 182, 194);
-moz-transition:all 0.5s linear;
-webkit-transition:all 0.5s linear;
-ms-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
transition:all 0.5s linear;
overflow:hidden;
}
.sliderbt title{top:-22px;}
section:hover{
cursor:pointer;
box-shadow:0px 0px 10px #ccc;
-moz-transition:all 0.5s ease;
-webkit-transition:all 0.5s ease;
-ms-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
transition:all 0.5s ease;
}
section:hover .slidertp
{
top:-50%;
transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-webkit-transition:all 0.5s linear;
-ms-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
transition:all 0.5s linear;
}
section:hover .sliderbt
{
bottom:-50%;
transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-webkit-transition:all 0.5s linear;
-ms-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
transition:all 0.5s linear;
}
.crossbt
{
width:0px;
height:0px;
border-bottom: 170px solid rgb(150, 202, 45);
border-left: 230px solid transparent;
position:absolute;
top:0px;
left:0px;
-moz-transition:all 0.5s linear;
-webkit-transition:all 0.5s linear;
-ms-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
transition:all 0.5s linear;
}
.crosstp
{
width:0px;
height:0px;
border-top: 170px solid rgb(150, 202, 45);
border-right: 230px solid transparent;
position:absolute;
bottom:0px;
right:0px;
-moz-transition:all 0.5s linear;
-webkit-transition:all 0.5s linear;
-ms-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
transition:all 0.5s linear;
}
section:hover .crosstp
{
right:230px;
-moz-transition:all 0.5s linear;
-webkit-transition:all 0.5s linear;
-ms-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
transition:all 0.5s linear;
}
section:hover .crossbt
{
left:230px;
-moz-transition:all 0.5s linear;
-webkit-transition:all 0.5s linear;
-ms-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
transition:all 0.5s linear;
}
.crosstp title
{
transform: rotate(-36deg);
-webkit-transform: rotate(-36deg);
-moz-transform: rotate(-36deg);
position: absolute;
left: 50px;
width: 230px;
display: block;
top: -140px;
}
.slidertprd
{
position:absolute;
width:100%;
height:50%;
left:0px;
top:0px;
background:#fff;
overflow:hidden;
background:rgb(52, 60, 65);
-moz-transition:all 0.5s linear;
-webkit-transition:all 0.5s linear;
-ms-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
transition:all 0.5s linear;
border-bottom-right-radius:0px;
}
section:hover .slidertprd
{
border-bottom-right-radius:100px;
left:-100%;
-moz-transition:all 0.5s linear;
}
section:hover .sliderbtrd
{
border-top-right-radius:200px;
left:-100%;
-moz-transition:all 0.5s linear;
}
.slidertp title{bottom:-20px;}
.sliderbtrd
{
position:absolute;
width:100%;
height:50%;
left:0px;
bottom:0px;
background:rgb(52, 60, 65);
-moz-transition:all 0.5s linear;
-webkit-transition:all 0.5s linear;
-ms-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
transition:all 0.5s linear;
overflow:hidden;
}
.sliderbtrd title{top:-22px;}
@media only screen and (min-width: 768px) and (max-width: 1024px)
{
.section{width:80%;padding:0px 50px;text-align:center;}
}
Developer | Jitendra |
Username | berdejitendra |
Uploaded | July 04, 2022 |
Rating | 4.5 |
Size | 2,540 Kb |
Views | 42,504 |
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!
Name | Size |
CSS3 Lion | 2,493 Kb |
Services table | 2,136 Kb |
Facebook Flat Notification | 2,611 Kb |
Responsive Section hover effect to show content | 2,540 Kb |
One element - Pixel Dog | 2,503 Kb |
Mobile Sub Menu Concept | 2,790 Kb |
Mobile App UI | 3,180 Kb |
Two joint circles - One element | 1,704 Kb |
Underpants - One Element | 1,822 Kb |
Hidden menu on click or touch | 2,723 Kb |
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!
Name | Username | Size |
Calculator | Rzencoder | 4,572 Kb |
Wikipedia Viewer | Thomasvaeth | 2,549 Kb |
Fixed with using Calc | Tomleo | 2,542 Kb |
Mobile Sub Menu Concept | Berdejitendra | 2,790 Kb |
To Do List with Delete | Mattlbrody | 2,068 Kb |
SVG Basics | HipsterBrown | 1,852 Kb |
A Pen by Jason Kinney | Jason-kinney | 1,980 Kb |
Scifi-style Interative Form | Aaronchuo | 4,566 Kb |
CSS Link Zoom On Click | Bryce | 1,960 Kb |
Experiment - SCSS SVG Background Image with Variables | See8ch | 3,270 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!