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,504 |
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 |
| Pure CSS3 Vertical menu with nice hover effect | 2,079 Kb |
| Two joint circles - One element | 1,704 Kb |
| App login screen with CSS3 Animation | 3,145 Kb |
| Personal Identity - One element | 2,060 Kb |
| Hidden menu on click or touch | 2,723 Kb |
| IPad Sign Up | 2,090 Kb |
| Simple yet effective Social Links | 2,111 Kb |
| One element - Steve Jobs | 3,550 Kb |
| Mobile Sub Menu Concept | 2,790 Kb |
| Mail icon - One Element | 1,682 Kb |
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!
Similar Scripts & Codes
| Name | Username | Size |
| A Pen by Alex Bergin | Abergin | 3,347 Kb |
| Pagepilling.js | Blossk | 6,554 Kb |
| Twinkling Stars | Ripley6811 | 2,750 Kb |
| A Pen by boilzzz | Boilzzz | 2,761 Kb |
| E-mail Template | SoloMDFK | 4,871 Kb |
| Sexy Social Buttons | Ipiyale | 2,226 Kb |
| Mega menu | DimaZubkov | 5,066 Kb |
| Coming Soon | MariamMassadeh | 1,680 Kb |
| SnappySnippet Test | Elmsoftware | 8,385 Kb |
| Countdown Timer | Massiebn | 3,001 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!