I have an image gallery with some hover affects that I want to refine. When the user hovers on an image, the other pictures in the gallery get dimmed out. But I also want some text to slide in from the left on hover as well. Something like this website has http://gugroppo.com/projects.
I have the text appear on hover but I can't get it to transition in from the left smoothly; or have my overlay effect appear smoothly as well. Everything just appears. Here's my codepen.
window.sr = ScrollReveal({reset: true});
sr.reveal('img', {mobile:true});
body {
margin: 0;
padding: 0;
}
h2 {
padding-bottom: 7.5%;
color: #7bbe9a;
text-align: center;
font-size: 1.875em;
font-family: 'Lato', sans-serif;
}
.gallery{
width: 100%;
display: inline-block;
flex-wrap: wrap;
justify-content: center;
padding-top: 7.5%;
padding-bottom: 15%;
background-color: #333;
}
.img-container {
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-ms-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
width: 33.33%;
float: left;
display: block;
position: relative;
}
.img-container img{
display: block;
width: 100%;
height: auto;
}
#slide {
position: absolute;
left: -100px;
transition: 1s;
width: 100%;
height: 100%;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
opacity: 0;
/* background: rgba(123, 190, 154, 0.72); */
background: rgba(51,51,51, 0.2);
}
.text {
color: white;
position: absolute;
top: 50%;
left: 50%;
font-size: 24px;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
font-family: 'Lato', sans-serif;
}
#parent:hover > .img-container:not(:hover) {
opacity: 0.3;
}
.img-container:hover .overlay {
opacity: 1;
}
#media(max-width:768px){
.img-container {
width: 100% !important;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<body>
<a class="anchor" name="portfolio">
<div class="gallery">
<h2>Portfolio</h2>
</a>
<div id="parent">
<div class="img-container">
<a href="">
<img src="https://img1.cgtrader.com/items/4716/33d9798412/large/wicker-laundry-basket-3d-model-obj-3ds-c4d.jpg" alt=""></a>
<div class="overlay">
<div class="text">Basket</div>
</div>
</div>
<div class="img-container">
<a href="">
<img src="https://cdn.shopify.com/s/files/1/0225/1115/products/buildings-rts-orc-smithy-low-poly-3d-model-2_400x.jpeg?v=1456744435" alt=""></a>
<div class="overlay">
<div class="text">Train</div>
</div>
</div>
<div class="img-container">
<a href="">
<img src="http://www.pycomall.com/images/P1/Bed_Room_Interior_3D_Model_in_Max_format_7.jpg" alt=""></a>
<div class="overlay">
<div class="text">Bed</div>
</div>
</div>
<div class="img-container">
<a href="">
<img src="http://mycreativedaddy.com/wp-content/uploads/chair-capitone-3d-model.jpg" alt=""></a>
<div class="overlay">
<div class="text">Chair</div>
</div>
</div>
<div class="img-container">
<a href="">
<img src="http://www.pycomall.com/images/P1/Restaurant_Interior_3D_Model_in_Max_format_4.jpg" alt=""></a>
<div class="overlay">
<div class="text">Room</div>
</div>
</div>
<div class="img-container">
<a href="">
<img src="https://3dexport.com/items/2008/07/29/11820/9454/wedding_ring._3d_model_c4d_max_obj_fbx_ma_lwo_3ds_3dm_stl_66996.jpg" alt=""></a>
<div class="overlay">
<div class="text">Ring</div>
</div>
</div>
<div class="img-container">
<a href="">
<img src="http://www.madsonline.net/wp-content/uploads/2017/07/living-room-interior-3d-model-in-max-format-3-3d-models-in-3d-living-room-model.jpg" alt=""></a>
<div class="overlay">
<div class="text">Couch</div>
</div>
</div>
<div class="img-container">
<a href="">
<img src="https://d1a9v60rjx2a4v.cloudfront.net/2013/10/03/00_54_27_730_00_1.jpg" alt=""></a>
<div class="overlay">
<div class="text">Glass</div>
</div>
</div>
<div class="img-container">
<a href="">
<img src="https://img1.cgtrader.com/items/5185/bb5b9f2fde/large/bailarina-3d-model-obj-3ds-fbx-ma-mb.jpg" alt=""></a>
</div>
</div>
</body>
What you want to do is add overflow: hidden to your container
.img-container{overflow: hidden;}
Then initially start the text off the element. I did this by setting
.text{left: -50%;}
Finally you need to call the text back into the element on hover by using container:hover and setting the text back to 50%;
.img-container:hover .text{left: 50%;}
Lastly you will just need to add in some transition properties and attributes of your likely. Hope this helps.
The follow CSS should accomplish what you are looking for
body {
margin: 0;
padding: 0;
}
h2 {
padding-bottom: 7.5%;
color: #7bbe9a;
text-align: center;
font-size: 1.875em;
font-family: 'Lato', sans-serif;
}
.gallery{
width: 100%;
display: inline-block;
flex-wrap: wrap;
justify-content: center;
padding-top: 7.5%;
padding-bottom: 15%;
background-color: #333;
}
.img-container {
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-ms-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
width: 33.33%;
float: left;
display: block;
position: relative;
overflow: hidden;
}
.img-container img{
display: block;
width: 100%;
height: auto;
}
#slide {
position: absolute;
left: -100px;
transition: 1s;
width: 100%;
height: 100%;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
opacity: 0;
/* background: rgba(123, 190, 154, 0.72); */
background: rgba(51,51,51, 0.2);
}
.text {
color: white;
position: absolute;
top: 50%;
left: -50%;
font-size: 24px;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
font-family: 'Lato', sans-serif;
}
.img-container:hover .text {
left: 50%;
}
#parent:hover > .img-container:not(:hover) {
opacity: 0.3;
}
.img-container:hover .overlay {
opacity: 1;
}
#media(max-width:768px){
.img-container {
width: 100% !important;
}
}
Related
Pls I would need help to avoid having a blur effect on my child element "text-block" when the mouse is hovering the card element. The card element should completely have a blur effect when hovering with the mouse & display the text block over it.
I tried a lot of options that don't work throught the proposed solutions by the community. Thks a lot.
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
<div class="col">
<div class="card shadow-sm">
<div class="container my-2">
<img src="./images/mnemba_view.JPG" class="w-100 w-sm-120 preview"/>
<div class="text-block">Click to read more</div>
</div> `
.card {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.preview {
position: relative;
}
.text-block {
position: absolute;
opacity: 0;
z-index: 1;
bottom: 0;
top: 50%;
left: 50%;
block-size: 50px;
inline-size: 200px;
padding: 10px 10px;
background-color: rgb(189, 113, 20);
color: white;
border-radius: 10px;
}
.card:hover .text-block{
opacity: 1;
transition: opacity 0.5s ease-in-out;
}
.card:not(hover) .text-block {
transition: 0.4s;
}
.card:hover {
filter: blur(2px);
cursor: pointer;
}
I eventually found the solution.
Here's the solution:
.text-block {
position: absolute;
opacity: 0;
bottom: 0;
top: 50%;
left: 50%;
block-size: 50px;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
inline-size: 200px;
background-color: rgb(189, 113, 20);
color: white;
border-radius: 10px;
pointer-events: none;
text-align: center;
}
<div class="album py-5">
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
<div class="col">
<div class="card shadow-sm">
<div class="card-header fw-bold" style="background-color:#b76800a9">Africa</div>
<div class="preview">
<img src="./images/mnemba_view.JPG" alt="Ile de Mnemba" class="w-100 h-sm-200 w-sm-120 align-item-center justify-content-center"/>
<button class="text-block">Click to read more</button>
</div>
I'm building a responsive site and I'm using overflow-x: hidden property to stop the page from scrolling horizontally and showing white space but it's not working on phones. Every time I navigate back to the page, the horizontal scrollbar is shown again and white space appears on the right. I have looked at various other questions on this issue but cannot seem to solve it.
I believe it is related to the cards on the page, is any of the styling on the cards causing this issue? How can I remove the white space?
html {
overflow-x: hidden;
}
.portfolio-header {
margin-top: 19rem;
margin-left: 31%;
font-size: 30px;
}
}
.card-square
{
position: relative;
width: 90%;
height: 300px;
display: flex;
margin-left: 0px;
margin-top: 50px;
margin-bottom: 100px;
justify-content: center;
align-items: center;
}
.card-square-2 {
margin-top: 0rem;
}
.card-square span:nth-child(1) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid #000;
border-radius: 38% 62% 63% 37% /
41% 44% 56% 59%;
transition: 0.5s;
animation: animate 6s linear infinite;
}
.card-square:hover span:nth-child(1) {
border: none;
background: rgba(22,168,194,0.8);
}
.card-square span:nth-child(2) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid #000;
border-radius: 38% 62% 63% 37% /
41% 44% 56% 59%;
transition: 0.5s;
animation: animate2 4s linear infinite;
}
.card-square:hover span:nth-child(2) {
border: none;
background: rgba(22,168,194,0.8);
}
.card-square span:nth-child(3) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid #000;
border-radius: 38% 62% 63% 37% /
41% 44% 56% 59%;
transition: 0.5s;
animation: animate 10s linear infinite;
}
.card-square:hover span:nth-child(3) {
border: none;
background: rgba(22,168,194,0.8);
}
#keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes animate2 {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
.content {
position: relative;
color: #000;
text-align: center;
transition: 0.5s;
z-index: 1000;
}
.content a {
position: relative;
/* display: inline-block; */
margin-top: 10px;
border: 2px solid #fff;
padding: 6px 18px;
text-decoration: none;
color: #fff;
margin-left: 12px;
font-weight: 600;
border-radius: 73% 27% 44% 56% /
49% 44% 56% 51%;
}
.content a:hover {
background: #000;
color: #333;
}
.content p, .content h2 {
text-align: center;
width: 85%;
margin-left: 7.5%;
}
.content p {
font-size: 16px;
}
#media only screen and (min-width: 768px) {
.card-square {
width: 400px;
height: 400px;
margin-left: 130px;
}
.card-square-2 {
margin-top: -500px;
margin-left: 55%;
}
.card-square-4 {
margin-left: 55%;
margin-top: -500px;
}
.content p {
font-size: 20px;
}
}
<section class="portfolio" id="portfolio">
<h1 class="portfolio-header">Card section</h1>
<div class="card-square">
<span></span>
<span></span>
<span></span>
<div class="content">
<h2>Card 1</h2>
<p> This is card 1.
</p>
Link btn
</div>
</div>
<div class="card-square card-square-2">
<span></span>
<span></span>
<span></span>
<div class="content">
<h2>Card 2</h2>
<p>This is card 2. </p>
Link
</div>
</div>
<div class="card-square card-square-3">
<span></span>
<span></span>
<span></span>
<div class="content">
<h2>Card 3</h2>
<p>This is card 3.</p>
Link
<a class="second-btn" href="#">Link 2</a>
</div>
</div>
<div class="card-square card-square-4">
<span></span>
<span></span>
<span></span>
<div class="content">
<h2>Card 4</h2>
<p>This is card 4.</p>
Link 4
</div>
</div>
</section>
It's because you use width: 100vw - if you have a vertical scroll, your vw will not take the scrollbar into account and will give you horizontal scroll too. Use width: 100% instead (or remove it as h2 is a block element and will take the full width anyway)
html,
body {
margin: 0;
min-height: 100%;
min-width: 100%;
}
body {
margin: 0;
padding: 0;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
section {
margin-bottom: -33px;
}
h1 {
margin-left: 20%;
color: rgb(22, 168, 194);
}
/* Hero Image & navbar */
.banner-text {
width: 100%;
position: absolute;
}
* {
box-sizing: border-box;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: none;
color: white;
font-size: 20px;
}
.navbar-links ul {
margin: 0;
padding: 0;
display: flex;
}
.navbar-links li {
list-style: none;
}
.navbar-links li a {
text-decoration: none;
color: white;
padding-left: 1rem;
padding-right: 1em;
display: block;
}
.navbar-links li:hover {
background: #555;
}
.toggle-button {
position: absolute;
top: .75rem;
right: 2.5rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 31px;
height: 21px;
}
/* Phones */
#media (min-width: 320px) and (max-width: 480px) {
.toggle-button {
display: flex;
}
.navbar-links li:hover {
background: #555;
}
.navbar-links {
display: none;
width: 100%;
}
.navbar {
flex-direction: column;
align-items: flex-start;
}
.navbar-links ul {
flex-direction: column;
width: 100%;
/* margin-top: 30px; */
}
.navbar-links li {
text-align: center;
}
.navbar-links li .navlink {
padding: 0.5rem 1rem;
}
.navbar-links.active {
display: flex;
}
}
.toggle-button .bar {
height: 3px;
width: 100%;
background: white;
border-radius: 10px;
}
.banner-text h2 {
text-align: center;
color: #fff;
width: 100%;
font-size: 28px;
margin-top: 48%;
}
.banner-text .name {
margin-bottom: -95px;
}
/* For desktop: */
#media only screen and (min-width: 768px) {
.banner-text h2 {
margin-top: 14%;
font-size: 54px;
}
.banner-text .name {
margin-bottom: -100px;
}
}
.animation-area {
/* background: linear-gradient(to left, #16A8C2, #1B1C1C); */
background: rgb(22, 168, 194);
background: linear-gradient(0deg, rgba(22, 168, 194, 1) 0%, rgba(27, 28, 28, 1) 100%);
width: 100%;
height: 100vh;
}
.box-area {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 97%;
overflow: hidden;
}
.box-area .box-item {
position: absolute;
display: block;
list-style: none;
width: 25px;
height: 25px;
background: rgba(255, 255, 255, 0.2);
animation: animatedSquares 20s linear infinite;
bottom: -150px;
}
.box-area li:nth-child(1) {
left: 86%;
width: 80px;
height: 80px;
animation-delay: 0s
}
.box-area li:nth-child(2) {
left: 12%;
width: 30px;
height: 30px;
animation-delay: 1.5s;
animation-duration: 10s;
}
.box-area li:nth-child(3) {
left: 70%;
width: 100px;
height: 100px;
animation-duration: 5.5s;
}
.box-area li:nth-child(4) {
left: 42%;
width: 150px;
height: 150px;
animation-delay: 0s;
animation-duration: 15s;
}
.box-area li:nth-child(5) {
left: 65%;
width: 40px;
height: 40px;
animation-delay: 0s;
}
.box-area li:nth-child(6) {
left: 15%;
width: 110px;
height: 110px;
animation-delay: 3.5s;
}
#keyframes animatedSquares {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(-800px) rotate(360deg);
opacity: 0;
}
}
<section>
<div class="banner-text">
<nav class="navbar">
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li><a class="navlink" href="#">navlink1</a></li>
<li><a class="navlink" href="#">navlink2</a></li>
<li><a class="navlink" href="#">navlink3</a></li>
<li><a class="navlink" href="#">navlink4">CV</a></li>
</ul>
</div>
</nav>
<h2 class="header name">title name</h2>
<h2 class="header role">title role</h2>
</div>
<div class="animation-area">
<ul class="box-area">
<li class="box-item"></li>
<li class="box-item"></li>
<li class="box-item"></li>
<li class="box-item"></li>
<li class="box-item"></li>
<li class="box-item"></li>
</ul>
</div>
</section>
<section class="about" id="about">
<!-- social media icon bar -->
<ul class="social-media">
<li class="social-item">
<a href="" class="github">
<i class="fa fa-github"></i></a>
</li>
<li class="social-item">
<a href="">
<i class="fa fa-linkedin"></i></a>
</li>
<li class="social-item">
<a href="">
<i class="fa fa-stack-overflow"></i></a>
</li>
</ul>
<ul class="social-media-2">
<li class="social-item">
<a href="" class="codepen">
<i class="fa fa-codepen"></i></a>
</li>
<li class="social-item">
<a href="" class="dribble">
<i class="fa fa-dribbble"></i></a>
</li>
<li class="social-item">
<a href="" class="twitter">
<i class="fa fa-twitter"></i></a>
</li>
</ul>
<h1 class="about-header">About</h1>
<p class="about-text">text
</p>
<p class="career-story">
text
</p>
<div class="polaroid">
<img class="work-colleagues" src="./Images/img.jpg" alt="alt">
<div class="description">
<p class="description-text">text
<a class="featured-link" href="link" width="100%" height="100%">
Polaroid text</a> </p>
</div>
</div>
<p class="interests">
text
</p>
<div class="polaroid polaroid-2">
<img src="./Images/img.jpg" alt="alt" width="100%" height="100%">
<div class="description">
<p class="description-text">text
</p>
</div>
</div>
</section>
You are on the right track, but one thing to keep in mind is that you need to also add meta tags to your HTML header.
Solution
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, minimum-scale=1, maximum-scale=1">
And of course, in the CSS specify the overflow behavior:
html {
overflow-x: hidden;
}
Explanation
I'll break down the meta tag:
width=device-width this means we are telling the browser to adjust to the device-width
width=minimum-scale this is the smallest scale that you should go
width=maximum-scale this is the biggest scale that you should go
width=initial-scale where to start
user-scalable to allow the user to pinch (zoom in on mobile) or not.
You can read more about it on w3schools.
I found the reason why it's behaving like this.
You have the header and main content in a single section.
This caused all the issues.
Always try to segregate section wisely
Once you segregate. you can see the cards displaying in center.
later adjust your margin-left for .card-square class.
I haven't changed your CSS. Just modified your HTML to segregate the sections. now I cant see white space in the mobile view.
<section class="portfolio" id="portfolio">
<h1 class="portfolio-header">Card section</h1>
</section><section>
<div class="card-square">
<span></span>
<span></span>
<span></span>
<div class="content">
<h2>Card 1</h2>
<p> This is card 1.
</p>
Link btn
</div>
</div>
<div class="card-square card-square-2">
<span></span>
<span></span>
<span></span>
<div class="content">
<h2>Card 2</h2>
<p>This is card 2. </p>
Link
</div>
</div>
<div class="card-square card-square-3">
<span></span>
<span></span>
<span></span>
<div class="content">
<h2>Card 3</h2>
<p>This is card 3.</p>
Link
<a class="second-btn" href="#">Link 2</a>
</div>
</div>
<div class="card-square card-square-4">
<span></span>
<span></span>
<span></span>
<div class="content">
<h2>Card 4</h2>
<p>This is card 4.</p>
Link 4
</div>
</div>
</section>
This question already has answers here:
Change text color if background image is not white?
(1 answer)
Dual-Color Text
(2 answers)
Closed 4 years ago.
I want to change text color to white for the 9 cards text part that overlaps with moving background element. How do I achieve this?
I looked on mix-blend-mode: screen; but it not seems to be applicable for this case. Here I exported compiled css/html for code snippet:
.wrapper {
padding: 30px 0;
}
.chapter {
margin-bottom: 20px;
min-height: 200px;
border-radius: 6px;
background-color: #f6f8f9;
padding: 50px 60px;
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.chapter__title {
z-index: 1;
position: relative;
font-size: 24px;
font-weight: 500;
line-height: 1.25;
color: #444;
text-decoration: none;
transition: color 0.4s ease-in;
}
.chapter__link,
.chapter a {
z-index: 1;
position: relative;
font-size: 20px;
font-weight: 300;
line-height: 1.5;
transition: color 0.4s ease-in;
}
.chapter__link i,
.chapter a i {
font-size: 60%;
margin-left: 5px;
position: relative;
bottom: -2px;
}
.chapter__label {
position: absolute;
right: 15px;
top: 10px;
font-size: 14px;
text-transform: uppercase;
z-index: 1;
}
.chapter__label--gray {
text-transform: none;
color: #aaa;
}
.chapter:after {
content: "";
z-index: 0;
position: absolute;
right: 30px;
bottom: 0;
width: 400px;
height: 400px;
background-color: #0a95ff;
transform: translateX(-100%) translateY(-100%);
border-radius: 50%;
box-shadow: 0 0 0 0 #0a95ff;
transition: transform 0.4s ease-out, box-shadow 0.4s ease-in, background-color 0.2s ease-out;
}
.chapter:hover {
text-decoration: none;
cursor: pointer;
}
.chapter:hover .chapter__title {
color: white;
}
.chapter:hover .chapter__link,
.chapter:hover a {
color: white;
}
.chapter:hover .chapter__link span:after,
.chapter:hover a span:after {
width: 100%;
background-color: white;
transition: background-color 0.4s ease-in, width 0.2s ease-in;
transition-delay: 0, 0.4s;
}
.chapter:hover:after {
right: 30px;
bottom: 0;
transform: none;
}
.chapter:active:after {
box-shadow: 0 0 0 300px #0a95ff;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="wrapper row">
<div class="col-6 col-md-4">
<a href="javascript:void(0)" class="chapter ">
<div class="chapter__label chapter__label--gray">
9 cards
</div>
<div class="chapter__title">
Card title 1
</div>
<span class="chapter__link">
<span>Card link</span>
</span>
</a>
</div>
<div class="col-6 col-md-4">
<a href="javascript:void(0)" class="chapter ">
<div class="chapter__label chapter__label--gray">
9 cards
</div>
<div class="chapter__title">
Card title 2
</div>
<span class="chapter__link">
<span>Card link</span>
</span>
</a>
</div>
<div class="col-6 col-md-4">
<a href="javascript:void(0)" class="chapter ">
<div class="chapter__label chapter__label--gray">
9 cards
</div>
<div class="chapter__title">
Card title 3
</div>
<span class="chapter__link">
<span>Card link</span>
</span>
</a>
</div>
</div>
</div>
In pure css you can't. you can wrap the text part that overlaps in a span and then use color:white;
I've been having trouble with various play button options.
This time i copied from
codepen.io/martinkrulltott/pen/xwrXwR
My version
http://www.leatherspin.com/TEST.html
Check this solution added overlay play button
.video-thumbnail {
position: relative;
display: inline-block;
cursor: pointer;
margin: 30px;
}
.top-img {
position: relative;
display: inline-block;
cursor: pointer;
margin: 30px;
}
.btm-img {
position: relative;
display: inline-block;
cursor: pointer;
margin: 30px;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,0.7);
text-align:center;
}
.top-img:hover .overlay ,.btm-img:hover .overlay {
opacity: 1;
}
.overlay i
{
color:#fff;
top: 42%;
transform: translate(-50%,0);
position: absolute;
font-size:50px;
}
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<div class="video-thumbnail top-img">
<img src="http://www.leatherspin.com/Girl-in-leather-gloves-with-gun-leather-jacket-overknee-leather-boots-8.jpg" alt="Video thumbnail">
<div class="overlay">
<i class="fa fa-play"></i>
</div>
</div>
<div class="video-thumbnail btm-img">
<img src="http://www.leatherspin.com/girl-with-gun-leather-gloves-leather-pants-boots-170.jpg" alt="Video thumbnail">
<div class="overlay">
<i class="fa fa-play"></i>
</div>
</div>
I want these images above to pop up when someone hovers over them, each image pops up and comes to the center when someone hovers a mouse over the image, also they should be arranged in that format. I want to do this in WordPress, I am designing a website and the client wants that effect. Is it possible friends? please someone assist me.
HTML code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<nav>
<img src="http://winn-brown.co.uk/wp-content/uploads/2016/06/Logo-new.png" id="logo">
</nav>
<div class="wrapper">
<div class="parent" onclick="">
<div class="child bg-one">
Los Angeles
</div>
</div>
<div class="parent right" onclick="">
<div class="child bg-two">
London
</div>
</div>
<div class="parent" onclick="">
<div class="child bg-three">
New York
</div>
</div>
<div class="parent right" onclick="">
<div class="child bg-four">
Hollywood
</div>
</div>
<div class="parent" onclick="">
<div class="child bg-five">
Dubai
</div>
</div>
<div class="parent right" onclick="">
<div class="child bg-six">
San Francisco
</div>
</div>
</div>
CSS Code
/* Global Styling */
html, body {margin:0px; padding: 0px;}
nav {
background-color: #34495e;
height: 80px;
position: fixed;
width: 100vw;
top: 0;
z-index: 999;
}
#logo {height: 80px; margin-left: 20px;}
.wrapper {
padding: 50px 50px;
max-width: 1200px;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 80px;
}
.right {float: right !important;}
/* Image zoom on hover + Overlay colour */
.parent {
width: 45%;
margin: 20px;
height: 300px;
border: 1px solid blue;
overflow: hidden;
position: relative;
float: left;
display: inline-block;
cursor: pointer;
}
.child {
height: 100%;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
/* Several different images */
.bg-one {background-image: url(https://media.timeout.com/images/101602611/image.jpg);}
.bg-two {background-image: url(http://s1.it.atcdn.net/wp-content/uploads/2015/08/2-London.jpg);}
.bg-three {background-image: url(https://media.timeout.com/images/101484105/image.jpg);}
.bg-four {background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/00/Hollywood_Sign.jpg/1280px-Hollywood_Sign.jpg);}
.bg-five {background-image: url(http://www.travelandleisure.com/sites/default/files/styles/tnl_redesign_article_landing_page/public/1453920892/DUBAI-554088081-ABOVE0116.jpg?itok=dcoZnCrc);}
.bg-six {background-image: url(http://blog.whitepages.com/wp-content/uploads/2015/04/san-franc.jpg);}
a {
display: none;
font-size: 35px;
color: #ffffff !important;
font-family: sans-serif;
text-align: center;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 50px;
cursor: pointer;
/*text-decoration: none;*/
}
.parent:hover .child, .parent:focus .child {
-ms-transform: scale(1.2);
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.parent:hover .child:before, .parent:focus .child:before {
display: block;
}
.parent:hover a, .parent:focus a {
display: block;
}
.child:before {
content: "";
display: none;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(52,73,94,0.75);
}
/* Media Queries */
#media screen and (max-width: 960px) {
.parent {width: 100%; margin: 20px 0px}
.wrapper {padding: 20px 20px;}
}
.hello {display: none}
You will try this using that code when you hover the image then it will be zoom out the image. I think it will help you.