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 Previews
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,483 |
Do you need developer help for Responsive Section hover effect to show content?
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!
Jitendra (berdejitendra) Script Codes
| Name | Size |
| Two joint circles - One element | 1,704 Kb |
| Log in Form | 2,514 Kb |
| Social Icon Animation | 2,507 Kb |
| Facebook Flat Notification | 2,611 Kb |
| Underpants - One Element | 1,822 Kb |
| One element - Steve Jobs | 3,550 Kb |
| Pure CSS3 Vertical menu with nice hover effect | 2,079 Kb |
| One element - Pixel Dog | 2,503 Kb |
| Soft touch two option menu | 2,426 Kb |
| Mail icon - One Element | 1,682 Kb |
Create amazing web content 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!
Similar Scripts & Codes
| Name | Username | Size |
| Drag and Drop Quiz | Cgspicer | 3,837 Kb |
| Motion Lines - codevember - 02 - 2016 | Caiocares | 2,744 Kb |
| Flexbox Test | Icutpeople | 2,486 Kb |
| Simple Linear Regression with Editable Table | Melatonind | 3,264 Kb |
| Fun form with currentColor | Bnthor | 2,713 Kb |
| SnappySnippet Test | Elmsoftware | 8,385 Kb |
| Brown by pure CSS, no image, no javascript | Aaronchuo | 2,652 Kb |
| React Vote Component | Souporserious | 5,465 Kb |
| Subtle site navigation with description | Necks | 3,206 Kb |
| BenU Maintenance Site | Ksherman | 4,893 Kb |
Do you want hide your ip address?
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!