I am trying to make it so when a mouse hovers over an image it displays a caption and a blue background. The effect I am trying to replicate can be found on any image at http://adamginther.com/gradshow/students.php, I am trying to take this effect to the images i Samples on http://adamginther.com/gradshow/students/adam-ginther.php. Thanks!
<div id="samples">
<h6 class="title">Samples</h5>
<div class="work-image">
<a href="http://adamginther.com/work04.php" target="_blank">
<img src="../images/samples/adam-1.jpg" alt="Intestellar">
<span class="overlay-caption">
Test
</span>
</a>
<div class="corner corner-tl"></div>
<div class="corner corner-tr"></div>
<div class="corner corner-bl"></div>
<div class="corner corner-br"></div>
</div>
<div class="work-image">
<a href="http://adamginther.com/work01.php" target="_blank">
<img src="../images/samples/adam-2.jpg" alt="SPUD">
<span class="overlay-caption">
Test
</span>
</a>
<div class="corner corner-tl"></div>
<div class="corner corner-tr"></div>
<div class="corner corner-bl"></div>
<div class="corner corner-br"></div>
</div>
<div class="work-image">
<a href="http://adamginther.com/work03.php" target="_blank">
<img src="../images/samples/adam-3.jpg" alt="Work01">
<span class="overlay-caption">
Test
</span>
</a>
<div class="corner corner-tl"></div>
<div class="corner corner-tr"></div>
<div class="corner corner-bl"></div>
<div class="corner corner-br"></div>
</div>
.overlay-caption {
position: absolute;
top: 0;
left: 0;
background: $cyan-overlay;
width: 100%;
height: 100%;
opacity: 0;
color: #fff;
-webkit-transition: all 0.2s;
transition: all 0.2s;
font-size: 2em;
text-align: center;
padding: 60px 30px 0 30px;
transition-duration: 0.5s;
-webkit-transition-duration: 0.5s; /* Safari */
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
&:hover {
.overlay-caption {
opacity: 1;
}
}
Add to CSS:
#samples .work-image a:hover .overlay-caption {
opacity: 1;
}
.overlay-caption {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
color: #fff;
font-size: 2em;
text-align: center;
padding: 60px 30px 0 30px;
-webkit-transition:opacity 2s;
}
.overlay-caption:hover{
opacity: 1;
}
Related
I am trying to code a very simple HTML CSS file and here is my problem.
Here is my code
[https:// codepen.io/anhbui2904/pen/jOxeQgw][1]
My problem is, as you can see in this picture
Because of this code
.service-section .service-item{
flex: 0 0 33.33%;
max-width: 33.33%;
padding: 15px;
}
The pictures become 3 pictures per 1 line. As you can see in this picture
But I use this code
.work-section .work-item {
flex: 0 0 33.33%;
max-width: 33.33%;
padding: 15px;
}
As you can see, seems this code does not work ? The photos are still in line ? I do not know why ? Could you please give me some advice for this problem ? Thank you very much for your time.
#import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700&display=swap');
body{
margin: 0;
line-height: 1.5;
background-color: #f3f2f1;
}
body,
input,textarea,
button{
font-family: 'Raleway', 'sans-serif';
font-weight: 400;
}
*{
box-sizing: border-box;
margin: 0;
}
.container{
max-width: 1170px;
margin: auto;
}
.row{
display: flex;
flex-wrap: wrap;
}
.align-items-center{
align-items: center;
}
.justify-content-between{
justify-content: space-between;
}
#keyframes ani01{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
.section-title{
flex: 0 0 100%;
max-width: 100%;
margin-bottom: 60px;
padding: 0 15px;
}
.section-title h1{
display: inline-block;
font-size: 40px;
color: #000000;
font-weight: 700;
margin: 0;
position: relative;
}
.section-title h1:before{
content: '';
box-sizing: border-box;
position: absolute;
left: 0;
bottom: -5px;
width: 80px;
height: 3px;
background-color: #ff9800;
}
.btn-01{
background-color: #ff9800;
color: #fff;
border: 2px solid transparent;
padding: 10px 35px;
border-radius: 30px;
line-height: 1.5;
cursor: pointer;
text-decoration: none;
font-size: 16px;
font-weight: 600;
display: inline-block;
transition: all 0.5s ease;
}
.btn-01:hover{
background-color: transparent;
border-color: #FF9800;
color:#ff9800;
}
.btn-01:focus{
outline: none;
}
/* preloader */
/*.preloader{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: #111111;
z-index: 1099;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.6 ease;
}*/
.preloader.loaded{
visibility: hidden;
opacity: 0;
z-index: -99;
}
.preloader.loader{
height: 30px;
width: 30px;
border: 2px solid #FF9800;
border-right: 2px solid transparent;
border-radius: 50%;
animation: ani01 2s linear infinite;
}
/*Header*/
.header{
position: absolute;
left: 0;
top:0;
width: 99;
transition: all 0.5s ease;
}
.header .fixed{
background-color: #fff;
position: fixed;
}
.header .brand-name{
padding: 0 15px;
}
.header.brand-name a{
text-decoration: none;
font-size: 30px;
color: #fff;
text-transform: uppercase;
font-weight: 900;
letter-spacing: 2px;
transition: all 0.5s ease;
}
.header .fixed .brand-name a{
color: #0000;
}
.header .nav-toggle{
width: 40px;
height: 34px;
border: 1px solid #fff;
border-radius: 3px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.5s ease;
display: none;
}
.header .fixed .nav-toggle {
border-color: #000;
}
.header .nav-toggle span{
height: 1px;
display: block;
width: 16px;
background-color: #fff;
position: relative;
transition: all 0.5s ease;
}
.header .nav-toggle span::before,
.header .nav-toggle span::after{
content: '';
position: absolute;
left: 0;
top: 0;
height: 1px;
width: 100%;
background-color: #fff;
transition: all 0.5s ease;
}
.header .fixed .nav-toggle span,
.header .fixed .nav-toggle:before,
.header .fixed .nav-toggle::after{
background-color: #000000;
}
.header .nav-toggle span:before{
transform: translate(-6px);
}
.header .nav-toggle span:after{
transform: translate(6px);
}
.header .nav{
padding: 0 15px;
}
.header.nav ul{
list-style:none;
margin:0;
padding:0;
}
.header .nav ul li{
display: inline-block;
margin-left: 30px;
}
.header .nav ul li a {
text-decoration: none;
font-size: 16px;
font-weight: 600;
color: #ffffff;
padding: 25px 0;
display: block;
transition: all 0.5s ease;
}
.header .fixed .nav ul li a{
color: #000000;
}
.header .fixed .nav ul li a:hover,
.header .nav ul li a:hover{
color: #FF9800;
}
/* Home Section */
.home-section{
min-height: 100vh;
background-image: url('./img/moviebg.jpg');
background-size: cover;
background-position: center;
position: relative;
z-index: 1;
padding: 0 15px;
}
.home-section:before{
content: '';
position: absolute;
box-sizing: border-box;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: #000000;
opacity: 0.7;
z-index: -1;
}
.home-section .shape-01{
position:absolute;
height: 30px;
width:30px;
border: 2px solid #FF9800;
right: 5%;
top: 20%;
animation: ani01 5s linear infinite;
}
.home-section .row{
min-height: 100vh;
}
.home-section .home-content{
flex: 0 0 100%;
max-width: 100%;
text-align: center;
}
.home-section.home-content h4{
font-size: 20px;
color: #ffffff;
margin: 0;
}
.home-section .home-content h2{
font-size: 60px;
margin: 0;
color: #ffffff;
text-transform: uppercase;
font-weight: 900;
letter-spacing: 10px;
}
.home-section .scroll-down{
position: absolute;
left: 50%;
bottom: 30px;
height: 30px;
width: 30px;
margin-left: -15px;
animation: scrollDown 2s ease infinite;
}
#keyframes scrollDown{
0%,20%,50%,80%,100%{
transform: translateY(0);
}
40%{
transform: translateY(-30px);
}
60%{
transform: translateY(-15px);
}
}
.home-section .scroll-down img{
width: 25px;
display: block;
margin: 2px auto;
}
.about-section {
padding: 80px 0 0;
}
.about-section .about-img{
flex: 0 0 33.33%;
max-width: 33.33%;
padding: 0 15px;
}
.about-section .about-img .img-box{
position: relative;
}
.about-section .about-img .img-box .shape-02{
position: absolute;
height: 30px;
width: 30px;
border: 2px solid #FF9800;
left: 30px;
top: 30px;
animation: ani01 5s linear infinite;
}
.about-section .about-img .img-box img{
width: 100%;
display: block;
}
.about-section .about-content{
flex: 0 0 66.66%;
max-width: 66.66%;
padding: 0 15px;
}
.about-section .section-title{
margin-bottom: 30px;
padding: 0;
}
.about-section .about-content p{
font-size: 16px;
color: #555555;
line-height: 26px;
margin: 0;
}
.about-section .about-content .stats .stat-box{
flex: 0 0 25%;
max-width: 25%;
padding: 0 15px;
text-align: center;
margin-top: 30px;
}
.about-section.about-content.stats.stat-box h2{
font-size: 40px;
color: #000000;
margin: 0 0 5px;
}
.about-section .about-content .stats .stat-box h5{
font-size: 16px;
color: #555555;
font-weight: 600;
text-transform: uppercase;
}
.about-section .about-content .btn{
margin-top: 30px;
}
/*Categories*/
.service-section {
padding: 80px 0;
}
.service-section .service-item{
flex: 0 0 33.33%;
max-width: 33.33%;
padding: 15px;
}
.service-section .service-item-inner{
position: relative;
overflow: hidden;
}
.service-section .service-item-inner {
position: relative;
overflow: hidden;
}
.service-section .service-item-inner img{
width: 100%;
display: block;
filter:grayscale(100%);
transition: all 0.5s ease;
}
.service-section .service-item-inner:hover img{
filter:grayscale(0);
transform: scale(1.1);
}
.service-section .service-item-inner .overlay{
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.6);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.5s ease;
}
.service-section .service-item-inner:hover .overlay{
background-color: transparent;
}
.service-section .service-item-inner .overlay h3{
color: #ffffff;
font-size: 30px;
margin: 0;
text-align: center;
transition: all 0.5s ease;
text-transform: capitalize;
}
.service-section .service-item-inner .overlay:hover h4{
transform: translateX(30px);
opacity: 0;
}
/* Top-Rated*/
.work-section{
padding: 80px 0 0;
}
.work-section .work-item {
flex: 0 0 33.33%;
max-width: 33.33%;
padding: 15px;
}
.work-section .work-item-inner img{
width: 100%;
display: block;
transform: scale(1.1);
}
.work-section .work-item-inner:hover img{
filter: grayscale(100);
transform: scale(1);
}
.work-section .work-item-inner{
position: relative;
cursor: pointer;
overflow: hidden;
}
.work-section .work-item-inner .overlay{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 15px;
display: flex;
align-items: flex-end;
transition: all 0.5s ease;
background-color: rgba(0,0,0,0.6);
opacity: 0;
}
.work-section .work-item-inner:hover .overlay{
opacity: 1;
}
.work-section .work-item-inner:hover .overlay h4{
color: #ffffff;
font-size: 20px;
margin: 0;
transform: translateX(30px);
transition: all 0.5s ease;;
}
.work-section .work-item-inner:hover .overlay h4{
transform: translateX(0);
}
<body>
<!--preloader-->
<div class="preloader">
<div class="loader"></div>
</div>
<!--preloader ends-->
<!--Head section starts-->
<header class="header">
<div class="container">
<div class="row justify-content-between align-items-center">
<div class="brand-name">
Movie Mania
</div>
<div class="nav-toggle">
<span></span>
</div>
<nav class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Categories</li>
<li>Top-Rated</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>
<!-- Header end -->
<!-- Home Section starts -->
<section class="home-section" id="home">
<div class="shape-01">
</div>
<div class="container">
<div class="row align-items-center">
<div class="home-content">
<h4>Download your favourite movie in just a click</h4>
<h2>Welcome to Movie Mania</h2>
</div>
</div>
<!--Scroll Down-->
<a href="#about" class="scroll-down">
<img src="https://i.postimg.cc/vHVsxYMk/arrow-down.png" alt="scroll down">
</a>
</div>
</section>
<!-- Home section end -->
<!-- About section start -->
<section class="about-section" id="about">
<div class="container">
<div class="row">
<div class="about-img">
<div class="img-box">
<div class="shape-02"></div>
<img src="https://i.postimg.cc/76tk0b58/about.jpg" width = "30" height = "auto" alt="About US">
</div>
</div>
<div class="about-content">
<div class="row">
<div class="section-title">
<h1>About Us</h1>
</div>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
<div class="stats">
<div class="row">
<div class="stat-box">
<h2>150K+</h2>
<h5>Daily Downloads</h5>
</div>
<div class="stat-box">
<h2>2500+</h2>
<h5>Movies Available</h5>
</div>
<div class="stat-box">
<h2>1M+</h2>
<h5>Happy Clients</h5>
</div>
</div>
</div>
<!--Contact Button-->
Contact Us
</div>
</div>
</div>
</section>
<!--About us ends -->
<!--Categories section start-->
<section class="service-section" id="categories">
<div class="container">
<div class="row">
<div class="section-title">
<h1>Categories</h1>
</div>
</div>
<div class="row">
<!--categories start-->
<div class="service-item">
<div class="service-item-inner">
<img src="https://i.postimg.cc/YShKkMXd/1.jpg" alt="category 1" width = "300" height = "auto">
<div class="overlay">
<h3>Ha Noi</h3>
</div>
</div>
</div>
<div class="service-item">
<div class="service-item-inner">
<img src="https://i.postimg.cc/1z2x322s/2.jpg" alt="category 2" width = "300" height = "auto">
<div class="overlay">
<h3>Hai Phong</h3>
</div>
</div>
</div>
<div class="service-item">
<div class="service-item-inner">
<img src="https://i.postimg.cc/BQBGBhLB/3.jpg" alt="category 3" width = "300" height = "auto">
<div class="overlay">
<h3>Nam Dinh</h3>
</div>
</div>
</div>
<div class="service-item">
<div class="service-item-inner">
<img src="https://i.postimg.cc/XY2STpgZ/4.jpg" alt="category 4" width = "300" height = "auto">
<div class="overlay">
<h3>Thanh Hoa</h3>
</div>
</div>
</div>
<div class="service-item">
<div class="service-item-inner">
<img src="https://i.postimg.cc/28DDvp65/5.jpg" alt="category 5" width = "300" height = "auto">
<div class="overlay">
<h3>Vinh</h3>
</div>
</div>
</div>
<div class="service-item">
<div class="service-item-inner">
<img src="https://i.postimg.cc/jSqYgzy0/6.jpg" alt="category 6" width = "300" height = "auto">
<div class="overlay">
<h3>Hue</h3>
</div>
</div>
</div>
</div>
</div>
</section>
<!--Category section ends-->
<!--Top rated section start-->
<section class="work-section" id="top">
<div class="container">
<div class="row">
<div class="section-title">
<h1>Top-Rated Movies</h1>
</div>
</div>
<div class="row">
<div class="work-item">
<div class="work-item-inner">
<img src="https://i.postimg.cc/854hHgGV/1.jpg" width = "300" height = "auto" data-large="./img/works/large/1.png" alt="Movie 1">
<div class="overlay">
<h4>Paris</h4>
</div>
</div>
</div>
</div>
<div class="row">
<div class="work-item">
<div class="work-item-inner">
<img src="https://i.postimg.cc/jjz6DJk2/2.jpg" width = "300" height = "auto" data-large="./img/works/large/2.png" alt="Movie 1">
<div class="overlay">
<h4>Berlin</h4>
</div>
</div>
</div>
</div>
<div class="row">
<div class="work-item">
<div class="work-item-inner">
<img src="https://i.postimg.cc/sXsY7Dtc/3.jpg" width = "300" height = "auto" data-large="./img/works/large/3.jpg" alt="Movie 1">
<div class="overlay">
<h4>Vill</h4>
</div>
</div>
</div>
</div>
<div class="row">
<div class="work-item">
<div class="work-item-inner">
<img src="https://i.postimg.cc/PqGzfMy0/4.jpg" width = "300" height = "auto" data-large="./img/works/large/4.jpg" alt="Movie 1">
<div class="overlay">
<h4>Thuong Hai</h4>
</div>
</div>
</div>
</div>
<div class="row">
<div class="work-item">
<div class="work-item-inner">
<img src="https://i.postimg.cc/65mfgKvW/5.jpg" width = "300" height = "auto" data-large="./img/works/large/5.jpg" alt="Movie 1">
<div class="overlay">
<h4>Bac Kinh</h4>
</div>
</div>
</div>
</div>
<div class="row">
<div class="work-item">
<div class="work-item-inner">
<img src="https://i.postimg.cc/jSn4r1Hz/6.jpg" width = "300" height = "auto" data-large="./img/works/large/6.png" alt="Movie 1">
<div class="overlay">
<h4>Trung Khanh</h4>
</div>
</div>
</div>
</div>
</div>
</section>
<!--top rated end -->
<!--contact section start-->
<section class="contact-section" id="contact">
<div class="container">
<div class="row">
<div class="img-box">
<div class="section-title">
<h1>Contact Us</h1>
</div>
</div>
</div>
</div>
<div class="row">
<div class="contact-form">
<form class="form">
<div class="row">
<div class="left input-group">
<label>Name</label>
<input type="text" placeholder="Your Name Here" class="input-control">
</div>
<div class="right input-group">
<label>Email or Phone</label>
<input type="text" placeholder="Your Email or Phone Here" class="input-control">
</div>
</div>
<div class="row">
<div class="left input-group">
<label>Message</label>
<textarea class="input-control" placeholder="Your Message Here"></textarea>
</div>
</div>
<div class="form-btn">
<button type="button" class="btn btn-01" id="button">Send Message</button>
</div>
<div id="dialog">
I know you know this, but you are awesome. As we say au revoir to another #ResearchPride month,
</div>
</form>
</div>
</div>
<div class="row">
<div class="contact-info">
<div class="row">
<div class="info-item">
<h5>Address</h5>
<p>X5 T7 U8 USA</p>
</div>
<div class="info-item">
<h5>Phone</h5>
<p>090 8403 1789</p>
</div>
<div class="info-item">
<h5>Email</h5>
<p>maviemanie#mivie.com</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="social-links">
<img src="https://i.postimg.cc/6Q9JPCRx/facebook.png" width = "100" height = "auto" alt="facebook">
<img src="https://i.postimg.cc/zBvmz50d/twitter.png" width = "100" height = "auto" alt="twitter">
<img src="https://i.postimg.cc/7Pc4LGvS/linkedin.png" width = "100" height = "auto" alt="linkedin">
<img src="https://i.postimg.cc/rsdLJc4d/intagram.jpg" width = "200" height = "auto" alt="intagram">
</div>
</div>
</section>
<p class="copyright">© 2022 Movie Mania</p>
<!--light box start-->
<div class="lightbox">
<div class="img-box">
<div class="lightbox-close">×</div>
<img src="https://i.postimg.cc/qML93zSm/2.png" width = "100" height = "auto" class="lightbox-img" alt="img1">
<div class="lightbox-caption">
<div class="lightbox-category">
</div>
<div class="lightbox-counter">
</div>
</div>
<div class="lightbox-controls">
<div class="prev">
<img src="https://i.postimg.cc/W4XLct6F/previous.png" width = "100" height = "auto" alt="previous">
</div>
<div class="next">
<img src="https://i.postimg.cc/QdZrp2dt/next.png" width = "100" height = "auto" alt="next">
</div>
</div>
</div>
</div>
<!--light box end -->
</body>
#import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700&display=swap');
body{
margin: 0;
line-height: 1.5;
background-color: #f3f2f1;
}
body,
input,textarea,
button{
font-family: 'Raleway', 'sans-serif';
font-weight: 400;
}
*{
box-sizing: border-box;
margin: 0;
}
.container{
max-width: 1170px;
margin: auto;
}
.row{
display: flex;
flex-wrap: wrap;
}
.align-items-center{
align-items: center;
}
.justify-content-between{
justify-content: space-between;
}
#keyframes ani01{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
.section-title{
flex: 0 0 100%;
max-width: 100%;
margin-bottom: 60px;
padding: 0 15px;
}
.section-title h1{
display: inline-block;
font-size: 40px;
color: #000000;
font-weight: 700;
margin: 0;
position: relative;
}
.section-title h1:before{
content: '';
box-sizing: border-box;
position: absolute;
left: 0;
bottom: -5px;
width: 80px;
height: 3px;
background-color: #ff9800;
}
.btn-01{
background-color: #ff9800;
color: #fff;
border: 2px solid transparent;
padding: 10px 35px;
border-radius: 30px;
line-height: 1.5;
cursor: pointer;
text-decoration: none;
font-size: 16px;
font-weight: 600;
display: inline-block;
transition: all 0.5s ease;
}
.btn-01:hover{
background-color: transparent;
border-color: #FF9800;
color:#ff9800;
}
.btn-01:focus{
outline: none;
}
/* preloader */
/*.preloader{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: #111111;
z-index: 1099;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.6 ease;
}*/
.preloader.loaded{
visibility: hidden;
opacity: 0;
z-index: -99;
}
.preloader.loader{
height: 30px;
width: 30px;
border: 2px solid #FF9800;
border-right: 2px solid transparent;
border-radius: 50%;
animation: ani01 2s linear infinite;
}
/*Header*/
.header{
position: absolute;
left: 0;
top:0;
width: 99;
transition: all 0.5s ease;
}
.header .fixed{
background-color: #fff;
position: fixed;
}
.header .brand-name{
padding: 0 15px;
}
.header.brand-name a{
text-decoration: none;
font-size: 30px;
color: #fff;
text-transform: uppercase;
font-weight: 900;
letter-spacing: 2px;
transition: all 0.5s ease;
}
.header .fixed .brand-name a{
color: #0000;
}
.header .nav-toggle{
width: 40px;
height: 34px;
border: 1px solid #fff;
border-radius: 3px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.5s ease;
display: none;
}
.header .fixed .nav-toggle {
border-color: #000;
}
.header .nav-toggle span{
height: 1px;
display: block;
width: 16px;
background-color: #fff;
position: relative;
transition: all 0.5s ease;
}
.header .nav-toggle span::before,
.header .nav-toggle span::after{
content: '';
position: absolute;
left: 0;
top: 0;
height: 1px;
width: 100%;
background-color: #fff;
transition: all 0.5s ease;
}
.header .fixed .nav-toggle span,
.header .fixed .nav-toggle:before,
.header .fixed .nav-toggle::after{
background-color: #000000;
}
.header .nav-toggle span:before{
transform: translate(-6px);
}
.header .nav-toggle span:after{
transform: translate(6px);
}
.header .nav{
padding: 0 15px;
}
.header.nav ul{
list-style:none;
margin:0;
padding:0;
}
.header .nav ul li{
display: inline-block;
margin-left: 30px;
}
.header .nav ul li a {
text-decoration: none;
font-size: 16px;
font-weight: 600;
color: #ffffff;
padding: 25px 0;
display: block;
transition: all 0.5s ease;
}
.header .fixed .nav ul li a{
color: #000000;
}
.header .fixed .nav ul li a:hover,
.header .nav ul li a:hover{
color: #FF9800;
}
/* Home Section */
.home-section{
min-height: 100vh;
background-image: url('./img/moviebg.jpg');
background-size: cover;
background-position: center;
position: relative;
z-index: 1;
padding: 0 15px;
}
.home-section:before{
content: '';
position: absolute;
box-sizing: border-box;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: #000000;
opacity: 0.7;
z-index: -1;
}
.home-section .shape-01{
position:absolute;
height: 30px;
width:30px;
border: 2px solid #FF9800;
right: 5%;
top: 20%;
animation: ani01 5s linear infinite;
}
.home-section .row{
min-height: 100vh;
}
.home-section .home-content{
flex: 0 0 100%;
max-width: 100%;
text-align: center;
}
.home-section.home-content h4{
font-size: 20px;
color: #ffffff;
margin: 0;
}
.home-section .home-content h2{
font-size: 60px;
margin: 0;
color: #ffffff;
text-transform: uppercase;
font-weight: 900;
letter-spacing: 10px;
}
.home-section .scroll-down{
position: absolute;
left: 50%;
bottom: 30px;
height: 30px;
width: 30px;
margin-left: -15px;
animation: scrollDown 2s ease infinite;
}
#keyframes scrollDown{
0%,20%,50%,80%,100%{
transform: translateY(0);
}
40%{
transform: translateY(-30px);
}
60%{
transform: translateY(-15px);
}
}
.home-section .scroll-down img{
width: 25px;
display: block;
margin: 2px auto;
}
.about-section {
padding: 80px 0 0;
}
.about-section .about-img{
flex: 0 0 33.33%;
max-width: 33.33%;
padding: 0 15px;
}
.about-section .about-img .img-box{
position: relative;
}
.about-section .about-img .img-box .shape-02{
position: absolute;
height: 30px;
width: 30px;
border: 2px solid #FF9800;
left: 30px;
top: 30px;
animation: ani01 5s linear infinite;
}
.about-section .about-img .img-box img{
width: 100%;
display: block;
}
.about-section .about-content{
flex: 0 0 66.66%;
max-width: 66.66%;
padding: 0 15px;
}
.about-section .section-title{
margin-bottom: 30px;
padding: 0;
}
.about-section .about-content p{
font-size: 16px;
color: #555555;
line-height: 26px;
margin: 0;
}
.about-section .about-content .stats .stat-box{
flex: 0 0 25%;
max-width: 25%;
padding: 0 15px;
text-align: center;
margin-top: 30px;
}
.about-section.about-content.stats.stat-box h2{
font-size: 40px;
color: #000000;
margin: 0 0 5px;
}
.about-section .about-content .stats .stat-box h5{
font-size: 16px;
color: #555555;
font-weight: 600;
text-transform: uppercase;
}
.about-section .about-content .btn{
margin-top: 30px;
}
/*Categories*/
.service-section {
padding: 80px 0;
}
.service-section .service-item{
flex: 0 0 33.33%;
max-width: 33.33%;
padding: 15px;
}
.service-section .service-item-inner{
position: relative;
overflow: hidden;
}
.service-section .service-item-inner {
position: relative;
overflow: hidden;
}
.service-section .service-item-inner img{
width: 100%;
display: block;
filter:grayscale(100%);
transition: all 0.5s ease;
}
.service-section .service-item-inner:hover img{
filter:grayscale(0);
transform: scale(1.1);
}
.service-section .service-item-inner .overlay{
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.6);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.5s ease;
}
.service-section .service-item-inner:hover .overlay{
background-color: transparent;
}
.service-section .service-item-inner .overlay h3{
color: #ffffff;
font-size: 30px;
margin: 0;
text-align: center;
transition: all 0.5s ease;
text-transform: capitalize;
}
.service-section .service-item-inner .overlay:hover h4{
transform: translateX(30px);
opacity: 0;
}
/* Top-Rated*/
.work-section{
padding: 80px 0 0;
}
.work-section .work-item {
flex: 0 0 33.33%;
max-width: 33.33%;
padding: 15px;
}
.work-section .work-item-inner img{
width: 100%;
display: block;
transform: scale(1.1);
}
.work-section .work-item-inner:hover img{
filter: grayscale(100);
transform: scale(1);
}
.work-section .work-item-inner{
position: relative;
cursor: pointer;
overflow: hidden;
}
.work-section .work-item-inner .overlay{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 15px;
display: flex;
align-items: flex-end;
transition: all 0.5s ease;
background-color: rgba(0,0,0,0.6);
opacity: 0;
}
.work-section .work-item-inner:hover .overlay{
opacity: 1;
}
.work-section .work-item-inner:hover .overlay h4{
color: #ffffff;
font-size: 20px;
margin: 0;
transform: translateX(30px);
transition: all 0.5s ease;;
}
.work-section .work-item-inner:hover .overlay h4{
transform: translateX(0);
}
<body>
<!--preloader-->
<div class="preloader">
<div class="loader"></div>
</div>
<!--preloader ends-->
<!--Head section starts-->
<header class="header">
<div class="container">
<div class="row justify-content-between align-items-center">
<div class="brand-name">
Movie Mania
</div>
<div class="nav-toggle">
<span></span>
</div>
<nav class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Categories</li>
<li>Top-Rated</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>
<!-- Header end -->
<!-- Home Section starts -->
<section class="home-section" id="home">
<div class="shape-01">
</div>
<div class="container">
<div class="row align-items-center">
<div class="home-content">
<h4>Download your favourite movie in just a click</h4>
<h2>Welcome to Movie Mania</h2>
</div>
</div>
<!--Scroll Down-->
<a href="#about" class="scroll-down">
<img src="https://i.postimg.cc/vHVsxYMk/arrow-down.png" alt="scroll down">
</a>
</div>
</section>
<!-- Home section end -->
<!-- About section start -->
<section class="about-section" id="about">
<div class="container">
<div class="row">
<div class="about-img">
<div class="img-box">
<div class="shape-02"></div>
<img src="https://i.postimg.cc/76tk0b58/about.jpg" width = "30" height = "auto" alt="About US">
</div>
</div>
<div class="about-content">
<div class="row">
<div class="section-title">
<h1>About Us</h1>
</div>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
<div class="stats">
<div class="row">
<div class="stat-box">
<h2>150K+</h2>
<h5>Daily Downloads</h5>
</div>
<div class="stat-box">
<h2>2500+</h2>
<h5>Movies Available</h5>
</div>
<div class="stat-box">
<h2>1M+</h2>
<h5>Happy Clients</h5>
</div>
</div>
</div>
<!--Contact Button-->
Contact Us
</div>
</div>
</div>
</section>
<!--About us ends -->
<!--Categories section start-->
<section class="service-section" id="categories">
<div class="container">
<div class="row">
<div class="section-title">
<h1>Categories</h1>
</div>
</div>
<div class="row">
<!--categories start-->
<div class="service-item">
<div class="service-item-inner">
<img src="https://i.postimg.cc/YShKkMXd/1.jpg" alt="category 1" width = "300" height = "auto">
<div class="overlay">
<h3>Ha Noi</h3>
</div>
</div>
</div>
<div class="service-item">
<div class="service-item-inner">
<img src="https://i.postimg.cc/1z2x322s/2.jpg" alt="category 2" width = "300" height = "auto">
<div class="overlay">
<h3>Hai Phong</h3>
</div>
</div>
</div>
<div class="service-item">
<div class="service-item-inner">
<img src="https://i.postimg.cc/BQBGBhLB/3.jpg" alt="category 3" width = "300" height = "auto">
<div class="overlay">
<h3>Nam Dinh</h3>
</div>
</div>
</div>
<div class="service-item">
<div class="service-item-inner">
<img src="https://i.postimg.cc/XY2STpgZ/4.jpg" alt="category 4" width = "300" height = "auto">
<div class="overlay">
<h3>Thanh Hoa</h3>
</div>
</div>
</div>
<div class="service-item">
<div class="service-item-inner">
<img src="https://i.postimg.cc/28DDvp65/5.jpg" alt="category 5" width = "300" height = "auto">
<div class="overlay">
<h3>Vinh</h3>
</div>
</div>
</div>
<div class="service-item">
<div class="service-item-inner">
<img src="https://i.postimg.cc/jSqYgzy0/6.jpg" alt="category 6" width = "300" height = "auto">
<div class="overlay">
<h3>Hue</h3>
</div>
</div>
</div>
</div>
</div>
</section>
<!--Category section ends-->
<!--Top rated section start-->
<section class="work-section" id="top">
<div class="container">
<div class="row">
<div class="section-title">
<h1>Top-Rated Movies</h1>
</div>
</div>
<div class="row">
<div class="work-item">
<div class="work-item-inner">
<img src="https://i.postimg.cc/854hHgGV/1.jpg" width = "300" height = "auto" data-large="./img/works/large/1.png" alt="Movie 1">
<div class="overlay">
<h4>Paris</h4>
</div>
</div>
</div>
<div class="work-item">
<div class="work-item-inner">
<img src="https://i.postimg.cc/jjz6DJk2/2.jpg" width = "300" height = "auto" data-large="./img/works/large/2.png" alt="Movie 1">
<div class="overlay">
<h4>Berlin</h4>
</div>
</div>
</div>
<div class="work-item">
<div class="work-item-inner">
<img src="https://i.postimg.cc/sXsY7Dtc/3.jpg" width = "300" height = "auto" data-large="./img/works/large/3.jpg" alt="Movie 1">
<div class="overlay">
<h4>Vill</h4>
</div>
</div>
</div>
<div class="work-item">
<div class="work-item-inner">
<img src="https://i.postimg.cc/PqGzfMy0/4.jpg" width = "300" height = "auto" data-large="./img/works/large/4.jpg" alt="Movie 1">
<div class="overlay">
<h4>Thuong Hai</h4>
</div>
</div>
</div>
<div class="work-item">
<div class="work-item-inner">
<img src="https://i.postimg.cc/65mfgKvW/5.jpg" width = "300" height = "auto" data-large="./img/works/large/5.jpg" alt="Movie 1">
<div class="overlay">
<h4>Bac Kinh</h4>
</div>
</div>
</div>
<div class="work-item">
<div class="work-item-inner">
<img src="https://i.postimg.cc/jSn4r1Hz/6.jpg" width = "300" height = "auto" data-large="./img/works/large/6.png" alt="Movie 1">
<div class="overlay">
<h4>Trung Khanh</h4>
</div>
</div>
</div>
</div>
</div>
</section>
<!--top rated end -->
<!--contact section start-->
<section class="contact-section" id="contact">
<div class="container">
<div class="row">
<div class="img-box">
<div class="section-title">
<h1>Contact Us</h1>
</div>
</div>
</div>
</div>
<div class="row">
<div class="contact-form">
<form class="form">
<div class="row">
<div class="left input-group">
<label>Name</label>
<input type="text" placeholder="Your Name Here" class="input-control">
</div>
<div class="right input-group">
<label>Email or Phone</label>
<input type="text" placeholder="Your Email or Phone Here" class="input-control">
</div>
</div>
<div class="row">
<div class="left input-group">
<label>Message</label>
<textarea class="input-control" placeholder="Your Message Here"></textarea>
</div>
</div>
<div class="form-btn">
<button type="button" class="btn btn-01" id="button">Send Message</button>
</div>
<div id="dialog">
I know you know this, but you are awesome. As we say au revoir to another #ResearchPride month,
</div>
</form>
</div>
</div>
<div class="row">
<div class="contact-info">
<div class="row">
<div class="info-item">
<h5>Address</h5>
<p>X5 T7 U8 USA</p>
</div>
<div class="info-item">
<h5>Phone</h5>
<p>090 8403 1789</p>
</div>
<div class="info-item">
<h5>Email</h5>
<p>maviemanie#mivie.com</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="social-links">
<img src="https://i.postimg.cc/6Q9JPCRx/facebook.png" width = "100" height = "auto" alt="facebook">
<img src="https://i.postimg.cc/zBvmz50d/twitter.png" width = "100" height = "auto" alt="twitter">
<img src="https://i.postimg.cc/7Pc4LGvS/linkedin.png" width = "100" height = "auto" alt="linkedin">
<img src="https://i.postimg.cc/rsdLJc4d/intagram.jpg" width = "200" height = "auto" alt="intagram">
</div>
</div>
</section>
<p class="copyright">© 2022 Movie Mania</p>
<!--light box start-->
<div class="lightbox">
<div class="img-box">
<div class="lightbox-close">×</div>
<img src="https://i.postimg.cc/qML93zSm/2.png" width = "100" height = "auto" class="lightbox-img" alt="img1">
<div class="lightbox-caption">
<div class="lightbox-category">
</div>
<div class="lightbox-counter">
</div>
</div>
<div class="lightbox-controls">
<div class="prev">
<img src="https://i.postimg.cc/W4XLct6F/previous.png" width = "100" height = "auto" alt="previous">
</div>
<div class="next">
<img src="https://i.postimg.cc/QdZrp2dt/next.png" width = "100" height = "auto" alt="next">
</div>
</div>
</div>
</div>
<!--light box end -->
</body>
I got the following piece of code:
img {
object-fit: contain;
width: 250px !important;
height: 200px !important;
border: 3px solid #555;
}
img.zoomable {
object-fit: contain;
width: 600px !important;
height: 600px !important;
}
.portfolio .portfolio-item {
margin-bottom: 30px;
}
.portfolio #portfolio-flters {
padding: 0;
margin: 0 auto 25px auto;
list-style: none;
text-align: center;
background: #fff;
border-radius: 50px;
padding: 2px 15px;
}
.portfolio #portfolio-flters li {
cursor: pointer;
display: inline-block;
padding: 10px 15px;
font-size: 14px;
font-weight: 600;
line-height: 1;
text-transform: uppercase;
color: #272829;
margin-bottom: 5px;
transition: all 0.3s ease-in-out;
}
.portfolio #portfolio-flters li:hover,
.portfolio #portfolio-flters li.filter-active {
color: #0563bb;
}
.portfolio #portfolio-flters li:last-child {
margin-right: 0;
}
.portfolio .portfolio-wrap {
transition: 0.3s;
position: relative;
overflow: hidden;
z-index: 1;
}
.portfolio .portfolio-wrap::before {
content: "";
background: rgba(255, 255, 255, 0.7);
position: absolute;
left: 30px;
right: 30px;
top: 30px;
bottom: 30px;
transition: all ease-in-out 0.3s;
z-index: 2;
opacity: 0;
}
.portfolio .portfolio-wrap .portfolio-info {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
z-index: 3;
transition: all ease-in-out 0.3s;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.portfolio .portfolio-wrap .portfolio-info::before {
display: block;
content: "";
width: 48px;
height: 48px;
position: absolute;
top: 35px;
left: 35px;
border-top: 3px solid #d7dce1;
border-left: 3px solid #d7dce1;
transition: all 0.5s ease 0s;
z-index: 9994;
}
.portfolio .portfolio-wrap .portfolio-info::after {
display: block;
content: "";
width: 48px;
height: 48px;
position: absolute;
bottom: 35px;
border-bottom: 3px solid #d7dce1;
border-right: 3px solid #d7dce1;
transition: all 0.5s ease 0s;
z-index: 9994;
}
.portfolio .portfolio-item {
max-width: 250px !important;
}
.portfolio .portfolio-wrap .portfolio-info h4 {
font-size: 20px;
color: #45505b;
font-weight: 600;
}
.portfolio .portfolio-wrap .portfolio-info p {
color: #45505b;
font-size: 14px;
text-transform: uppercase;
padding: 0;
margin: 0;
}
.portfolio .portfolio-wrap .portfolio-links {
text-align: center;
z-index: 4;
}
.portfolio .portfolio-wrap .portfolio-links a {
color: #45505b;
margin: 0 2px;
font-size: 28px;
display: inline-block;
transition: 0.3s;
}
.portfolio .portfolio-wrap .portfolio-links a:hover {
color: #148af9;
}
.portfolio .portfolio-wrap:hover::before {
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 1;
}
.portfolio .portfolio-wrap:hover .portfolio-info {
opacity: 1;
}
.portfolio .portfolio-wrap:hover .portfolio-info::before {
top: 15px;
left: 15px;
}
.portfolio .portfolio-wrap:hover .portfolio-info::after {
bottom: 15px;
right: 15px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<section id="portfolio" class="portfolio section-bg">
<div class="container" data-aos="fade-up">
<div class="row portfolio-container" data-aos="fade-up" data-aos-delay="200">
<div class="col-lg-4 col-md-6 portfolio-item filter-app">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-1.jpg">
<div class="portfolio-info">
<div class="portfolio-links">
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-2.jpg">
<div class="portfolio-info">
<div class="portfolio-links">
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-app">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-3.jpg">
<div class="portfolio-info">
<div class="portfolio-links">
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-card">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-4.jpg">
<div class="portfolio-info">
<div class="portfolio-links">
<i class="bx bx-zoom-in"></i>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-5.jpg" class="img-fluid" alt="">
<div class="portfolio-info">
<div class="portfolio-links">
<i class="bx bx-zoom-in"></i>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-app">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-6.jpg" class="img-fluid" alt="">
<div class="portfolio-info">
<div class="portfolio-links">
<i class="bx bx-zoom-in"></i>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-card">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-7.jpg" class="img-fluid" alt="">
<div class="portfolio-info">
<div class="portfolio-links">
<i class="bx bx-zoom-in"></i>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-card">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-8.jpg" class="img-fluid" alt="">
<div class="portfolio-info">
<div class="portfolio-links">
<i class="bx bx-zoom-in"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
This creates a nice image gallery where you can click on a picture and it zooms in once you have clicked.
The point is, when I click on an image it goes trough all 6 of the images. For example I only want to scroll to 3 of the images and then click on another picture and scroll trough those 3 of the other gallery.
I already tried making seperate divs and tried using the same code to replicate it but then it took all 12 pictures and scrolled trough them. How am I able to make these into seperate galleries?
Thanks in advance!
I already tried making seperate divs and tried using the same code to replicate it but then it took all 12 pictures and scrolled trough them. How am I able to make these into seperate galleries?
Also looked at multiple image galleries on one page
And
Modal image galleries with multiple images
But these aren't really what im looking for..
I'm still a little noob in front-end so please let me know if you need more information.
I have 2 columns inside of a div, with each column containing 3 divs each. As this is for a mobile site, I want them to be aligned in the center responsively. They're aligned fine when resized for a standard mobile (320px, 375px) like so: http://imgur.com/a/WDwSL, but when resized at tablet size, they don't center align at all. http://imgur.com/a/mMTRG
How can I get them to stay in the center no matter what size the phone size? I tried media queries and other responsive grids but they didn't work. Any help would be appreciated. Thanks!
.two-circles {
width: 100%;
}
.circles-left {
width: 37%;
float: left;
margin-left: 18%;
padding: 0;
display: block;
}
.circles-right {
width: 37%;
padding-bottom: 13%;
float: left;
display: block;
}
.clear {
clear: both;
}
.rate-circles {
border: 3px solid white;
border-radius: 50%;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
opacity: 1;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-size: 50px;
line-height: 75px;
color: #0E3475;
text-shadow: none;
-webkit-box-shadow: 0 0 1px 0px rgb( 255, 255, 255);
box-shadow: none;
width: 75px;
height: 75px;
z-index: 86;
-webkit-transition: background-color .5s ease-in-out;
-moz-transition: background-color .5s ease-in-out;
-o-transition: background-color .5s ease-in-out;
-ms-transition: background-color .5s ease-in-out;
transition: background-color .5s ease-in-out;
}
h5.circles {
font-size: 18px;
text-align: center;
margin-top: -25px;
}
h1.rate {
color: #1E53A8;
font-weight: bold;
text-align: center;
}
.two-circles a {
list-style-type: none;
text-decoration: none;
}
<div data-role="content" id="cmp-postlist">
<h1 class="rate"> RATE YOUR ANXIETY</h1>
<div class="two-circles">
<div class="circles-left">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">1
<h5 class="circles">Nervous</h5>
</div>
</a>
</div>
<div class="circles-right">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">2
<h5 class="circles">Uneasy</h5>
</div>
</a>
</div>
<div class="circles-left">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">3
<h5 class="circles">Anxious</h5>
</div>
</a>
</div>
<div class="circles-right">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">4
<h5 class="circles">Worried</h5>
</div>
</a>
</div>
<div class="circles-left">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">5
<h5 class="circles">Fearful</h5>
</div>
</a>
</div>
<div class="circles-right">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">6
<h5 class="circles">Panicked</h5>
</div>
</a>
</div>
</div>
<div class="clear"></div>
</div>
JSFIDDLE
.two-circles {
width: 100%;
}
.circles-left,.circles-right {
width: 45%;
padding-bottom: 13%;
float: left;
}
.circles-right {
text-align:left;
padding-left: 5%;
}
.circles-left {
text-align:right;
padding-right: 5%;
}
.clear {
clear: both;
}
.rate-circles {
border: 3px solid white;
border-radius: 50%;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
opacity: 1;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-size: 50px;
line-height: 75px;
color: #0E3475;
text-shadow: none;
-webkit-box-shadow: 0 0 1px 0px rgb( 255, 255, 255);
box-shadow: none;
width: 75px;
height: 75px;
z-index: 86;
-webkit-transition: background-color .5s ease-in-out;
-moz-transition: background-color .5s ease-in-out;
-o-transition: background-color .5s ease-in-out;
-ms-transition: background-color .5s ease-in-out;
transition: background-color .5s ease-in-out;
display: inline-block;
}
h5.circles {
font-size: 18px;
text-align: center;
margin-top: -25px;
}
h1.rate {
color: #1E53A8;
font-weight: bold;
text-align: center;
}
.two-circles a {
list-style-type: none;
text-decoration: none;
}
<div data-role="content" id="cmp-postlist">
<h1 class="rate"> RATE YOUR ANXIETY</h1>
<div class="two-circles">
<div class="circles-left">
<a href="cmp-grounding.html" rel="external"><div class="rate-circles">1
<h5 class="circles">Nervous</h5>
</div></a>
</div>
<div class="circles-right">
<a href="cmp-grounding.html" rel="external"><div class="rate-circles">2
<h5 class="circles">Uneasy</h5>
</div></a>
</div>
<div class="circles-left">
<a href="cmp-grounding.html" rel="external"><div class="rate-circles">3
<h5 class="circles">Anxious</h5>
</div></a>
</div>
<div class="circles-right">
<a href="cmp-grounding.html" rel="external"><div class="rate-circles">4
<h5 class="circles">Worried</h5>
</div></a>
</div>
<div class="circles-left">
<a href="cmp-grounding.html" rel="external"><div class="rate-circles">5
<h5 class="circles">Fearful</h5>
</div></a>
</div>
<div class="circles-right">
<a href="cmp-grounding.html" rel="external"><div class="rate-circles">6
<h5 class="circles">Panicked</h5>
</div></a>
</div>
</div>
<div class="clear"></div>
</div>
use this css. i didnt make any changes in HTML. my suggestion is you need to do some changes in both HTML and CSS
.wrapper{
width: 1170px;
max-width: 90%;
margin: 0 auto;
padding: 0 20px;
text-align: center;
}
.column{
width: 48%;
display: inline-block;
margin: 0 .5%;
}
.item{
width: 100%;
background-color: blue;
color: white;
margin-bottom: 20px;
display: inline-block;
}
<div class="wrapper">
<h2>2 column center divs</h2>
<div class="column">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="column">
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</div>
Would personally change your approach
There are many ways to do it but the most efficient and simplest way would be to use the CSS3 Flexbox. Designed to solve exactly these sort of layout issues.
Code reduces significantly as well. All you need is to give the outer .two-circles and inner .circles-left, .circles-right a property display: flex. Most importantly the justify-content: center to the inner circles to align it to the center. Shown below:
.two-circles {
width:100%;
display: flex;
flex-wrap: wrap;
}
.circles-left, .circles-right {
width:48%;
display: flex;
justify-content: center;
padding-bottom: 13%;
}
That's it! The rest of the code from .clear remains the same as you require.
Fiddle updated here
Using FLex will make this easier. See below.
body {
background: #ccc;
}
.two-circles {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.circles-left, .circles-right {
width: 37%;
text-align: center;
}
.circles-right {
padding-bottom: 13%;
}
.rate-circles {
border: 3px solid white;
border-radius: 50%;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
opacity: 1;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-size: 50px;
line-height: 75px;
color: #0E3475;
text-shadow: none;
-webkit-box-shadow: 0 0 1px 0px rgb( 255, 255, 255);
box-shadow: none;
width: 75px;
height: 75px;
z-index: 86;
-webkit-transition: background-color .5s ease-in-out;
-moz-transition: background-color .5s ease-in-out;
-o-transition: background-color .5s ease-in-out;
-ms-transition: background-color .5s ease-in-out;
transition: background-color .5s ease-in-out;
}
h5.circles {
font-size: 18px;
text-align: center;
margin-top: -25px;
}
h1.rate {
color: #1E53A8;
font-weight: bold;
text-align: center;
}
.two-circles a {
list-style-type: none;
text-decoration: none;
display: inline-block;
}
<div data-role="content" id="cmp-postlist">
<h1 class="rate"> RATE YOUR ANXIETY</h1>
<div class="two-circles">
<div class="circles-left">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">1
<h5 class="circles">Nervous</h5>
</div>
</a>
</div>
<div class="circles-right">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">2
<h5 class="circles">Uneasy</h5>
</div>
</a>
</div>
<div class="circles-left">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">3
<h5 class="circles">Anxious</h5>
</div>
</a>
</div>
<div class="circles-right">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">4
<h5 class="circles">Worried</h5>
</div>
</a>
</div>
<div class="circles-left">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">5
<h5 class="circles">Fearful</h5>
</div>
</a>
</div>
<div class="circles-right">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">6
<h5 class="circles">Panicked</h5>
</div>
</a>
</div>
</div>
<!--<div class="clear"></div> Remove-->
</div>
.heading{
margin: 40px 0px;
}
.heading h1{
text-align: center;
}
.block{
width: 100%;
text-align: center;
display: inline-flex;
}
.block_left, .block_right{
width: 50%;
}
.sub_block{
background: transparent;
border: 1px solid #ccc;
padding: 25px 30px;
border-radius: 50%;
}
.block_head{
margin: 40px 0px;
font-weight: bold;
}
<div class="heading">
<h1 class="">
RATE YOUR ANXIETY
</h1>
</div>
<div class="block">
<div class="block_left">
<span class="sub_block">
1
</span>
<div class="block_head">
Nervous
</div>
</div>
<div class="block_right">
<span class="sub_block">
2
</span>
<div class="block_head">
Uneasy
</div>
</div>
</div>
<!-- Third block row -->
<div class="block">
<div class="block_left">
<span class="sub_block">
5
</span>
<div class="block_head">
Fearful
</div>
</div>
<div class="block_right">
<span class="sub_block">
6
</span>
<div class="block_head">
Panicked
</div>
</div>
</div>
<!-- second block row -->
<div class="block">
<div class="block_left">
<span class="sub_block">
3
</span>
<div class="block_head">
Anxious
</div>
</div>
<div class="block_right">
<span class="sub_block">
4
</span>
<div class="block_head">
Worried
</div>
</div>
</div>
Since you mentioned grids, have you tried the concepts of display:inline-blocks?
CSS
.circles {
width:48%;
margin:1%; //not really required
display: inline-block;
}
.circle-wrapper {
text-align: center;
}
HTML
<div class="circle-wrapper">
<div class="circle">
<!-- content here -->
</div>
</div>
What display:inline-block does is that it wraps the space required to be exactly as much as the content it has (unless you define the width and height of course)
Thus with that you are able to place your elements the way you want.
What i have done in circles is I have defined the width of the circle to be 48% of the entire screen. Thus the content inside receives that much amount of space. (i could go for 50 but then there won't be space for margins and stuffs).
The wrapper class aligns these inline blocks to the center just like text blocks. :)
After all. text can be treated as inline-blocks
I have built a hover effect for my gallery. The gallery is within a Bootstrap Grid.
The hover itself works fine, but in some screen sizes the overlay goes over the gallery images.
Has anybody an idea or a solution or a hint for this problem?
Here an example:
demo
HTML:
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4">
<a href="http://www.google.com">
<div class="box">
<img class="img-responsive" src="http://placehold.it/300x300" />
<div class="overbox">
<div class="title overtext">Client</div>
<div class="tagline overtext">Tag</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-4">
<a href="http://www.google.com">
<div class="box">
<img class="img-responsive" src="http://placehold.it/300x300" />
<div class="overbox">
<div class="title overtext">Client</div>
<div class="tagline overtext">Tag</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-4">
<a href="http://www.google.com">
<div class="box">
<img class="img-responsive" src="http://placehold.it/300x300" />
<div class="overbox">
<div class="title overtext">Client</div>
<div class="tagline overtext">Tag</div>
</div>
</div>
</a>
</div>
</div>
</div>
CSS:
.box {
position: relative;
cursor: pointer;
width: 100%;
min-height: 100%;
overflow: hidden;
margin-bottom: 30px;
}
.box .overbox {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 100;
background-color: rgba(204, 36, 42, 0.75);
color: #fff;
opacity: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.box:hover .overbox {
opacity: 1;
}
.box .title {
font-size: 22px;
line-height: 131%;
font-weight: 400;
text-align: center;
padding-top: 95px;
}
#media (max-width: 991px) {
.box .title {
padding-top: 43px;
}
}
.box .tagline {
position: absolute;
bottom: 0px;
padding-top: 16px;
padding-bottom: 16px;
width: 100%;
display: flex;
justify-content: center;
font-size: 16px;
font-weight: 400;
font-style: italic;
border-top: 1px solid rgb(255, 255, 255);
}
.box_client {
position: relative;
width: 100%;
height: 100%;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.box_client:hover {
background: rgb(235, 234, 233);
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: grayscale(0%);
}
.img-responsive {
margin: 0 auto;
}
the overlay goes over the gallery images because you overlay has width:100%; and when the image is smaller than the width of its container the overlay goes over the gallery image because of the width of image
you have 2 options you can make the image width:100% or you can change the style of .box class and remove width:100%; and make its display:inline-block;
.box {
position: relative;
cursor: pointer;
// width: 100%; // remove this
display:inline-block; // add this
min-height: 100%;
overflow: hidden;
margin-bottom: 30px;
}
The Bootstrap column is growing and shrinking while the image has the same fixed size. So .responsive-image is smaller than its parent div. There are a few solutions:
1) Remove the image in the html and have it as a background-image
.box {
background: url(image-url) cover no-repeat;
}
2) Make the image 100% width
.response-image {
width: 100%;
}
3) Or as Ahmed Salama suggests, remove the width: 100% and add display: inline-block;
Your placeholder is smaller then the parent div element, which fits into the whole witdh of it's parent. Thats caused by the class img-responsive, that itself fits the the image to "max-width: 100%". You should use a bigger image or fit it to the size to your parent box, what is not recommended.
In this pen, i changed the placeholdersizes to 767px x 767px: http://codepen.io/pure180/details/OXpNxM/
HTML:
<div class="col-md-4 col-sm-4">
<a href="http://www.google.com">
<div class="box">
<img class="img-responsive" src="http://placehold.it/767x767" />
<div class="overbox">
<div class="title overtext">Client</div>
<div class="tagline overtext">Tag</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-4">
<a href="http://www.google.com">
<div class="box">
<img class="img-responsive" src="http://placehold.it/767x767" />
<div class="overbox">
<div class="title overtext">Client</div>
<div class="tagline overtext">Tag</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-4">
<a href="http://www.google.com">
<div class="box">
<img class="img-responsive" src="http://placehold.it/767x767" />
<div class="overbox">
<div class="title overtext">Client</div>
<div class="tagline overtext">Tag</div>
</div>
</div>
</a>
</div>
</div>
</div>
I fixed with this
.box {
position: relative;
cursor: pointer;
max-width: 300px;
min-height: 100%;
overflow: hidden;
margin: 0 auto;
margin-bottom: 30px;}
Here's my approach: https://jsfiddle.net/5f285ask/3/
.box {
position: relative;
display: inline-block;
}
.box .overbox {
background-color: rgba(204, 36, 42, 0.75);
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
width: 100%;
}
.box:hover .overbox {
opacity: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4 col-sm-4">
<div class="box">
<a href="#">
<img alt="" src="http://placehold.it/300x300" class="img-responsive">
<div class="overbox">
overbox content
</div>
</a>
</div>
</div>
I am trying to place some text in the center-bottom of a div which contains an overlay and image.
But how can i achieve this?
HTML code:
<div class="container">
<div class="row team-images">
<div class="col-sm-3">
<div class="team-item">
<div class="team-image-overlay"></div>
<img src="http://placehold.it/400x400" class="img-responsive" alt="" />
</div>
</div>
<div class="col-sm-3">
<div class="team-item">
<div class="team-image-overlay"></div>
<img src="http://placehold.it/400x400" class="img-responsive" alt="" />
</div>
</div>
<div class="col-sm-3">
<div class="team-item">
<div class="team-image-overlay"></div>
<img src="http://placehold.it/400x400" class="img-responsive" alt="" />
</div>
</div>
</div>
</div>
CSS code:
.team-images .team-item {
position: relative;
}
.team-images img {
width: 100%;
height: 100%;
margin: 0 0 15px;
}
.team-images .team-image-overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(41, 128, 185, 0.4);
color: #fff;
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
transition: all ease .5s;
}
.team-images .team-image-overlay:hover {
background: rgba(24, 188, 156, 0);
}
Here is a complete example of whats created so far: https://jsfiddle.net/prp794Lb/1/
How about this?
<div class="container">
<div class="row team-images">
<div class="col-sm-3">
<div class="team-item">
<div class="team-text">Text here</div>
<div class="team-image-overlay"></div>
<img src="http://placehold.it/400x400" class="img-responsive" alt="" />
</div>
</div>
<div class="col-sm-3">
<div class="team-item">
<div class="team-text">Lots and lots and lots and lots and lots of text here</div>
<div class="team-image-overlay"></div>
<img src="http://placehold.it/400x400" class="img-responsive" alt="" />
</div>
</div>
<div class="col-sm-3">
<div class="team-item">
<div class="team-text">Text here</div>
<div class="team-image-overlay"></div>
<img src="http://placehold.it/400x400" class="img-responsive" alt="" />
</div>
</div>
</div>
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.team-images .team-item {
position: relative;
}
.team-images img {
width: 100%;
height: 100%;
margin: 0 0 15px;
}
.team-images .team-image-overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(41, 128, 185, 0.4);
color: #fff;
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
transition: all ease .5s;
}
.team-images .team-image-overlay:hover {
background: rgba(24, 188, 156, 0);
}
.team-item .team-text {
position: absolute;
width: 100%;
bottom: 0;
text-align: center;
}
https://jsfiddle.net/wL5Lf5se/3/
Go for span inside overlay and style it like this:
Demo
.team-images .team-image-overlay span {
display:block;
text-align:center;
position:absolute;
bottom:20px;
left:20px;
right:20px;
opacity:0;
transition: all .3s ease;
color:#333;
}
.team-images .team-image-overlay:hover span {
display:block;
text-align:center;
position:absolute;
bottom:20px;
left:20px;
right:20px;
opacity:1;
}