I need your help. Hope someone can teach me how do this.
I want to have an orange underline on an image hover like on the "latest projects" on this template. I have no idea how to do that and I would like to know. Your answers would be highly appreciated !
This is my HTML.
<div class="sixteen columns">
<h4 class="headline">Recent Work</h4>
</div>
<!-- 1/4 Column -->
<div class="four columns">
<div class="item-img"><img src="images/portfolio_images/portfolio_3_01.jpg" alt=""/><div class="overlay zoom"></div></div>
<div class="portfolio-item-meta">
<h5>SockMonkee</h5>
<p>Aenean sit amet ligula est, conseact etur lectus. Maecenas hendrerit, lorem.</p>
</div>
</div>
<!-- 1/4 Column -->
<div class="four columns">
<div class="item-img"><img src="images/portfolio_images/portfolio_3_06.jpg" alt=""/><div class="overlay zoom"></div></div>
<div class="portfolio-item-meta">
<h5>Franky Fisticuffs</h5>
<p>Aenean sit amet ligula est, conseact etur lectus. Maecenas hendrerit, lorem.</p>
</div>
</div>
<!-- 1/4 Column -->
<div class="four columns">
<div class="item-img"><img src="images/portfolio_images/portfolio_3_04.jpg" alt=""/><div class="overlay zoom"></div></div>
<div class="portfolio-item-meta">
<h5>Package Project</h5>
<p>Gravida sit amet ligula eget conseact etur lectu aecenas hendrerit bibenea.</p>
</div>
</div>
<!-- 1/4 Column -->
<div class="four columns">
<div class="item-img"><img src="images/portfolio_img_04.jpg" alt=""/><div class="overlay zoom"></div></div>
<div class="portfolio-item-meta">
<h5>Ampertastic Mr. Fox</h5>
<p>Fermentum sit amet ligula estabe, eget conseact lectus maecenas hendrerit.</p>
</div>
</div>
<div class="clearfix"></div>
And my CSS
.portfolio-item {margin-bottom: 20px;}
.portfolio-item-meta h5 {
font-size: 12px;
font-family: Arial, sans-serif;
font-weight: bold;
line-height: 16px;
padding: 12px 0 8px 0;
margin: 0 0 8px 0;
border-bottom: 1px solid #e7e7e7;
letter-spacing: 0;
}
.portfolio-item-meta h5 span {
display: block;
color: #888;
font-weight: normal;
margin-top: 3px;
}
.portfolio-item-meta a{color:#444;}
.portfolio-item-meta a:hover {color:#888;}
.portfolio-item-meta p {color: #555;}
.item-img, .post-img {position: relative;}
.overlay {
height: 100%;
left: 0;
position: absolute;
top: 0px;
width: 100%;
z-index: 1;
z-index: 40;
opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
-webkit-transition: opacity 180ms ease-in-out;
-moz-transition: opacity 180ms ease-in-out;
-o-transition: opacity 180ms ease-in-out;
transition: opacity 180ms ease-in-out;
}
.overlay.zoom {background: url(../images/overlay.png) no-repeat center center, url(../images/overlay_bg.png) center center;}
.overlay:hover {
opacity: 1;
-moz-opacity: 1;
filter:alpha(opacity=100);
}
Have you tried this?
.item-img:hover {border-bottom: 1px solid orange;}
if it works you will need to add
transition: all 0.1s linear
for example, but you can find more here:
http://www.w3schools.com/css/css3_transitions.asp
Related
When hover over .card I want the .video to appear but it is not working. What do I need to change?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
html {
scroll-behavior: smooth;
}
#media screen and (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
/* header */
header {
height: 509px;
}
header h1 {
color: #fff;
font-size: 60px;
padding-bottom: 20px;
font-weight: 900;
}
header p {
color: #ffffffb5;
font-size: 20px;
line-height: 1.7;
padding-bottom: 20px;
}
header a i {
font-size: 60px;
color: #ffffff87;
transition: all .2s ease-in;
}
header a i:hover {
font-size: 60px;
color: #ffffff;
}
/* header */
/* media query for header section */
#media (max-width:767px) {
header video {
display: none;
}
header {
background: url(images/banner.jpg);
}
header h1 {
color: #fff;
font-size: 40px;
padding-bottom: 20px;
font-weight: 900;
}
header p {
color: #ffffffb5;
font-size: 18px;
line-height: 1.7;
padding-bottom: 20px;
}
}
/* media query for header section */
/* cards */
.cards {
background-color: #202024;
overflow: hidden;
padding-bottom: 30px;
}
.cards .video {
position: fixed;
top: 15%;
left: 20%;
display: none;
}
.cards .video .card:hover {
position: fixed;
top: 15%;
left: 20%;
display: block;
}
.cards .card {
width: 30.3333%;
background-color: #2C2C32;
overflow: hidden;
margin-right: 3%;
margin-bottom: 3%;
border-radius: 5px;
}
.cards .card .image {
width: 100%;
}
.cards .card .image img {
width: 100%;
cursor: pointer;
}
.cards .card h2 {
color: #fff;
font-size: 19px;
padding: 23px;
}
.cards .card p {
padding: 0 15px 30px;
color: #ffffffa8;
line-height: 1.3;
font-size: 17px;
}
.cards .card .btn {
padding-bottom: 25px;
}
.cards .card .btn button {
padding: 10px 0;
color: #fff;
background-color: #82CEC6;
border: none;
border-radius: 5px;
font-size: 15px;
width: 75%;
}
/* media query for cards section */
#media (max-width:767px) {
.cards {
padding: 30px;
}
.cards .card {
width: 100%;
margin-bottom: 35px;
}
}
/* media query for cards section */
/* footer */
footer {
background-color: #1B1B1F;
color: #fff;
}
footer .container .upper h2 {
font-size: 25px;
padding-bottom: 30px;
}
footer .container .upper p{
font-size: 15px;
padding-bottom: 30px;
line-height: 1.4;
color: #a5a7a7;
}
footer .container .lower .icons i {
color: #605d5da8;
border: 1px solid #605d5da8;
border-radius: 50%;
margin: 0 10px 30px 10px;
font-size: 20px;
cursor: pointer;
transition: all .2s ease-in;
}
footer .container .lower .icons i:hover {
color: #fff;
border: 1px solid #605d5da8;
border-radius: 50%;
margin: 0 10px 30px 10px;
font-size: 20px;
}
footer .container .lower .icons i:first-of-type {
padding: 13px 16px;
}
footer .container .lower .icons i:not(:first-of-type){
padding: 13px 13px; }
footer .container .lower .copyright {
color: #a7a7a7a7;
}
/* footer */
/* media query for footer section */
#media (max-width:767px) {
footer {
padding: 20px 0;
}
}
/* media query for footer section */
/*my frame work */
.flex-row {
display: flex;
justify-content: space-around;
align-items: center;
}
.flex-col {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.text-center {
text-align: center;
}
.float-l {
float: left;
}
.container {
padding: 5% 8% 5% 8%;
}
/*my frame work */
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Motion</title>
<script src="https://kit.fontawesome.com/11e8366046.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="motion.css">
</head>
<body>
<!--Header-->
<header class="flex-col" >
<video src="images/banner.mp4" autoplay="true" loop="true" style="width: 100%; z-index: -1000; position: fixed; top: 0; left: 0; "></video>
<div class="container">
<div class="text-center">
<h1>Full Motion</h1>
<p>A responsive video gallery template with a functional lightbox <br>
designed by Templated and released under the Creative Commons License</p>
</div>
<div class="text-center">
</i>
</div>
</div>
</header>
<!--Header-->
<!--cards-->
<div class="cards text-center" id="cards">
<div class="container">
<div class="video"><iframe width="800" height="467" src="https://www.youtube.com/embed/s6zR2T9vn2c" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class="card float-l">
<div class="image">
<img src="images/pic01.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
<div class="card float-l">
<div class="image">
<img src="images/pic02.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
<div class="card float-l">
<div class="image">
<img src="images/pic03.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
<div class="card float-l">
<div class="image">
<img src="images/pic04.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
<div class="card float-l">
<div class="image">
<img src="images/pic05.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
<div class="card float-l">
<div class="image">
<img src="images/pic06.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
</div>
</div>
<!--cards-->
<!--footer-->
<footer class="text-center">
<div class="container">
<div class="upper ">
<h2>Etiam veroeros lorem</h2>
<p>Pellentesque eleifend malesuada efficitur. Curabitur volutpat dui mi, ac imperdiet dolor tinciduntnec. Ut <br> erat lectus, dictum sit amet lectus a, aliquet rutrum mauris. Etiam nec lectus hendrerit , consectetur<br> risus viverra, iaculis orci. Phasellus eu nibh ut mi luctus auctor. Donec sit amet dolor in diam feugiat <br> venenatis. </p>
</div>
<div class="lower ">
<div class="icons">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
<div class="copyright">©<span>Untitled. Design: TEMPLATED. Images: Unsplash. Videos: Coverr.</span></div>
</div>
</div>
</footer>
<!--footer-->
</body>
</html>
First of: if you want to show any element (as well as a video) when hovering a card, then you need to put that element inside the HTML of the card. You failed to do that.
Also: you need to have the correct order of 'CSS selectors' to make that element visible when the .card gets hovered. Your original code .cards .video .card:hover fails to do that as it means: when from .cards and .video a .card:hover then show video.
What you need is: if from .cards a card:hover then show .video.
Also: when you want to position an element inside a parent you have to make .parent { position: relative } and its child .child { position: absolute }. Currently you use .child { position: fixed }. And without making the parent relative, the video is positioned somewhere on the screen (viewport) instead of the card (when all was working well, that is).
Lastly: the <iframe> you use is a child of <div> .video, so if you want to be able to size .video to your needs, you will need to make the <iframe> fully fill its parent (.video).
Plus: I changed the default background-color of the <header> to 'black' to make its content visible when there is no image.
To top it off: I added a <a> to the 'Watch'-button to open the movie on YouTube.
The below snippet has both the corrected HTML and proper CSS to show a video when the first card is hovered.
Note on SO the video in the card is still not visible, so I created a Fiddle to show that it works (the first card only, I leave the rest up to you).
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
html {
scroll-behavior: smooth;
}
#media screen and (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
/* header */
header {
height: 509px;
background-color: black;
}
header h1 {
color: #fff;
font-size: 60px;
padding-bottom: 20px;
font-weight: 900;
}
header p {
color: #ffffffb5;
font-size: 20px;
line-height: 1.7;
padding-bottom: 20px;
}
header a i {
font-size: 60px;
color: #ffffff87;
transition: all .2s ease-in;
}
header a i:hover {
font-size: 60px;
color: #ffffff;
}
/* header */
/* media query for header section */
#media (max-width:767px) {
header video {
display: none;
}
header {
background-image: url(images/banner.jpg); /* MOD from 'background' */
background-color: black;
}
header h1 {
color: #fff;
font-size: 40px;
padding-bottom: 20px;
font-weight: 900;
}
header p {
color: #ffffffb5;
font-size: 18px;
line-height: 1.7;
padding-bottom: 20px;
}
}
/* media query for header section */
/* cards */
.cards {
background-color: #202024;
overflow: hidden;
padding-bottom: 30px;
}
/* REMOVE THIS CODE
.cards .video {
position: fixed;
top: 15%;
left: 20%;
display: none;
}
.cards .video .card:hover {
position: fixed;
top: 15%;
left: 20%;
display: block;
}
END REMOVE */
/* And ADD */
iframe {
border: none; /* remove default border */
width: 100%; /* stretch to fill parent container */
height: 100%;
}
.cards .card {
position: relative; /* child content must be positioned inside this */
/* => a new 'stacking context' */
}
.cards .card .video {
display: none; /* hidden by default */
}
.cards .card:hover .video { /* when a card is hovered then show video */
position: absolute; /* position this element within a 'relative' parent */
top : 0; /* fully occupy the parent space */
right : 0;
left : 0;
bottom: 5rem; /* up to some position above `watch` button */
display: block; /* make it visible */
}
.cards .card .btn a {
text-decoration: none;
color: currentColor
}
/* End ADD */
.cards .card {
width: 30.3333%;
background-color: #2C2C32;
overflow: hidden;
margin-right: 3%;
margin-bottom: 3%;
border-radius: 5px;
}
.cards .card .image {
width: 100%;
}
.cards .card .image img {
width: 100%;
cursor: pointer;
}
.cards .card h2 {
color: #fff;
font-size: 19px;
padding: 23px;
}
.cards .card p {
padding: 0 15px 30px;
color: #ffffffa8;
line-height: 1.3;
font-size: 17px;
}
.cards .card .btn {
padding-bottom: 25px;
}
.cards .card .btn button {
padding: 10px 0;
color: #fff;
background-color: #82CEC6;
border: none;
border-radius: 5px;
font-size: 15px;
width: 75%;
}
/* media query for cards section */
#media (max-width:767px) {
.cards {
padding: 30px;
}
.cards .card {
width: 100%;
margin-bottom: 35px;
}
}
/* media query for cards section */
/* footer */
footer {
background-color: #1B1B1F;
color: #fff;
}
footer .container .upper h2 {
font-size: 25px;
padding-bottom: 30px;
}
footer .container .upper p{
font-size: 15px;
padding-bottom: 30px;
line-height: 1.4;
color: #a5a7a7;
}
footer .container .lower .icons i {
color: #605d5da8;
border: 1px solid #605d5da8;
border-radius: 50%;
margin: 0 10px 30px 10px;
font-size: 20px;
cursor: pointer;
transition: all .2s ease-in;
}
footer .container .lower .icons i:hover {
color: #fff;
border: 1px solid #605d5da8;
border-radius: 50%;
margin: 0 10px 30px 10px;
font-size: 20px;
}
footer .container .lower .icons i:first-of-type {
padding: 13px 16px;
}
footer .container .lower .icons i:not(:first-of-type){
padding: 13px 13px; }
footer .container .lower .copyright {
color: #a7a7a7a7;
}
/* footer */
/* media query for footer section */
#media (max-width:767px) {
footer {
padding: 20px 0;
}
}
/* media query for footer section */
/*my frame work */
.flex-row {
display: flex;
justify-content: space-around;
align-items: center;
}
.flex-col {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.text-center {
text-align: center;
}
.float-l {
float: left;
}
.container {
padding: 5% 8% 5% 8%;
}
<html>
<head>
<meta charset="UTF-8">
<title>Motion</title>
<script src="https://kit.fontawesome.com/11e8366046.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="motion.css">
</head>
<body>
<!--Header-->
<header class="flex-col" >
<video src="images/banner.mp4" autoplay="true" loop="true" style="width: 100%; z-index: -1000; position: fixed; top: 0; left: 0; "></video>
<div class="container">
<div class="text-center">
<h1>Full Motion</h1>
<p>A responsive video gallery template with a functional lightbox <br>
designed by Templated and released under the Creative Commons License</p>
</div>
<div class="text-center">
</i>
</div>
</div>
</header>
<!--Header-->
<!--cards-->
<div class="cards text-center" id="cards">
<div class="container">
<div class="card float-l">
<div class="video"><iframe src="https://www.youtube.com/embed/s6zR2T9vn2c" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class="image">
<img src="images/pic01.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button><a rel="noopener" target="_blank" href="https://www.youtube.com/watch?v=s6zR2T9vn2c">Watch</a></button>
</div>
</div>
<div class="card float-l">
<div class="image">
<img src="images/pic02.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
<div class="card float-l">
<div class="image">
<img src="images/pic03.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
<div class="card float-l">
<div class="image">
<img src="images/pic04.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
<div class="card float-l">
<div class="image">
<img src="images/pic05.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
<div class="card float-l">
<div class="image">
<img src="images/pic06.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
</div>
</div>
<!--cards-->
<!--footer-->
<footer class="text-center">
<div class="container">
<div class="upper ">
<h2>Etiam veroeros lorem</h2>
<p>Pellentesque eleifend malesuada efficitur. Curabitur volutpat dui mi, ac imperdiet dolor tinciduntnec. Ut <br> erat lectus, dictum sit amet lectus a, aliquet rutrum mauris. Etiam nec lectus hendrerit , consectetur<br> risus viverra, iaculis orci. Phasellus eu nibh ut mi luctus auctor. Donec sit amet dolor in diam feugiat <br> venenatis. </p>
</div>
<div class="lower ">
<div class="icons">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
<div class="copyright">©<span>Untitled. Design: TEMPLATED. Images: Unsplash. Videos: Coverr.</span></div>
</div>
</div>
</footer>
<!--footer-->
</body>
</html>
This question already has answers here:
What does + mean in CSS? [duplicate]
(4 answers)
What does the ">" (greater-than sign) CSS selector mean?
(8 answers)
What does the "~" (tilde/squiggle/twiddle) CSS selector mean?
(3 answers)
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
Closed 4 years ago.
On parent div hover, I want it's two child div's to move position via translate.
I've tried to form my code based on this approach, but when applying the code to practise, it doesn't work for me, wondering why?
/* HOVER DEFINED HERE */
.cta-wrapper:hover + .cta-image {
transform: translate(20px, 5px);
}
.cta-wrapper:hover ~ .cta-text {
transform: translate(-10px, -10px);
}
/************************/
.cta-wrapper {
position: relative;
padding-right: 15px;
padding-left: 15px;
width: 98.33333%;
transition: all 0.3s;
max-width: 1220px;
padding: 0 20px 80px;
margin: 0 auto;
}
.cta-wrapper a {
text-decoration: none;
text-align: left;
color: #fff;
}
.cta-image {
transition: all 0.2s;
z-index: 100;
position: relative;
}
.cta-text {
width: 295px;
text-align: left;
padding: 30px;
transform: translate(10px, -10px);
transition: all 0.2s;
background-color: #404262;
}
.card {
display: block;
border: none;
}
<div class="cta-wrapper">
<a href="#" class="card inverse-text">
<div class="cta-image"><img src="https://cdn2.hubspot.net/hubfs/548247/Tomorrow%20People/Landing%20Page/Template%20Build/GC_Jan_2017_137.png?t=1530188524021"></div>
</a>
<div class="cta-text">
<a href="#" class="card inverse-text">
<h3>Nam quis dolor id justo aliquet cursus in malesuada ante.</h3>
<p>Morbi vel efficitur orci, sit amet gravida dui. Integer dapibus ac mi a volutpat. Sed sed augue pulvinar, dignissim mauris non.</p>
</a>
<div class="fake-button">Read more <i class="arrow"></i></div>
</div>
</div>
Your selectors are incorrect for the hover. The selectors you've got aren't targeting child elements, they're targeting elements after the wrapper.
This should work:
/* HOVER DEFINED HERE */
.cta-wrapper:hover .cta-image {
transform: translate(20px, 5px);
}
.cta-wrapper:hover .cta-text {
transform: translate(-10px, -10px);
}
/************************/
.cta-wrapper {
position: relative;
padding-right: 15px;
padding-left: 15px;
width: 98.33333%;
transition: all 0.3s;
max-width: 1220px;
padding: 0 20px 80px;
margin: 0 auto;
}
.cta-wrapper a {
text-decoration: none;
text-align: left;
color: #fff;
}
.cta-image {
transition: all 0.2s;
z-index: 100;
position: relative;
}
.cta-text {
width: 295px;
text-align: left;
padding: 30px;
transform: translate(10px, -10px);
transition: all 0.2s;
background-color: #404262;
}
.card {
display: block;
border: none;
}
<div class="cta-wrapper">
<a href="#" class="card inverse-text">
<div class="cta-image"><img src="https://cdn2.hubspot.net/hubfs/548247/Tomorrow%20People/Landing%20Page/Template%20Build/GC_Jan_2017_137.png?t=1530188524021"></div>
</a>
<div class="cta-text">
<a href="#" class="card inverse-text">
<h3>Nam quis dolor id justo aliquet cursus in malesuada ante.</h3>
<p>Morbi vel efficitur orci, sit amet gravida dui. Integer dapibus ac mi a volutpat. Sed sed augue pulvinar, dignissim mauris non.</p>
</a>
<div class="fake-button">Read more <i class="arrow"></i></div>
</div>
</div>
Because of .cta-image and .cta-text being children, you're using the wrong selectors to target them.
/* HOVER DEFINED HERE */
.cta-wrapper:hover .cta-image {
transform: translate(20px, 5px);
}
.cta-wrapper:hover .cta-text {
transform: translate(-10px, -10px);
}
/************************/
.cta-wrapper {
position: relative;
padding-right: 15px;
padding-left: 15px;
width: 98.33333%;
transition: all 0.3s;
max-width: 1220px;
padding: 0 20px 80px;
margin: 0 auto;
}
.cta-wrapper a {
text-decoration: none;
text-align: left;
color: #fff;
}
.cta-image {
transition: all 0.2s;
z-index: 100;
position: relative;
}
.cta-text {
width: 295px;
text-align: left;
padding: 30px;
transform: translate(10px, -10px);
transition: all 0.2s;
background-color: #404262;
}
.card {
display: block;
border: none;
}
<div class="cta-wrapper">
<a href="#" class="card inverse-text">
<div class="cta-image"><img src="https://cdn2.hubspot.net/hubfs/548247/Tomorrow%20People/Landing%20Page/Template%20Build/GC_Jan_2017_137.png?t=1530188524021"></div>
</a>
<div class="cta-text">
<a href="#" class="card inverse-text">
<h3>Nam quis dolor id justo aliquet cursus in malesuada ante.</h3>
<p>Morbi vel efficitur orci, sit amet gravida dui. Integer dapibus ac mi a volutpat. Sed sed augue pulvinar, dignissim mauris non.</p>
</a>
<div class="fake-button">Read more <i class="arrow"></i></div>
</div>
</div>
Can anyone kindly help me out with my css+html issue? Please refer the code snippet I have added.
What I need to achive,
1. The boxes(.box) with images to stay fixed
2. The hidden description (.hidden) to go over the below image box when hovered without moving it
Can someone please help me figuring this out?
.box {
width: 170px;
transition: all .4s ease;
border-bottom: 10px solid #fff;
color:#000 !important;
}
#caption {
width: 160px;
font-size:15px;
text-decoration:none;
margin: 0 0 0px 5px;
}
.boximg{
width: auto;
max-width: 100%;
margin-bottom: 8px;
}
.box:hover {
width: auto;
max-width: 170px;
border-bottom: 10px solid #000;
transition: all .4s ease;
color:#ccdc29 !important;
background-color:#000;
}
.box:hover > #hidden {
display:block;
transition: all .3s ease;
overflow-x: hidden;
}
#hidden {
display:none;
color:#fff;
margin:5px;
transition: all .3s ease;
}
.image_off, #home:hover .image_on{
display:none;
transition: all .4s ease;
}
.image_on, #home:hover .image_off{
display:block;
transition: all .4s ease;
}
<div class="box">
<a href="#">
<img width="170px" class="image_on" src="http://kittenrescue.org/wp-content/uploads/2017/03/KittenRescue_KittenCareHandbook.jpg" /><img width="170px" class="image_off" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSH5rO0Te6nVxuBwuR352PJIKb6MeV-PDBKnVm4DBpwvd-8DPAJ" />
<br>
</a>
<p id="caption">Lorem Ipsum</p>
<p id="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin condimentum, nisi vel cursus consectetur, 7</p>
</div>
<div class="box">
<a href="#">
<img width="170px" class="image_on" src="http://kittenrescue.org/wp-content/uploads/2017/03/KittenRescue_KittenCareHandbook.jpg" /><img width="170px" class="image_off" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSH5rO0Te6nVxuBwuR352PJIKb6MeV-PDBKnVm4DBpwvd-8DPAJ" />
<br>
</a>
<p id="caption">Lorem Ipsum</p>
<p id="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin condimentum, nisi vel cursus consectetur</p>
</div>
Thanks heaps!
Try the following. I have fixed your nested anchors, removed some duplicate ids and positioned the caption absolutely. The only thing I would say is the caption has an 18px minus margin - not sure what creates that gap for the margin to be needed
Also if you want to stop the blinking effect, you need to use the same size images - your hover one is slightly larger
.box {
width: 170px;
transition: all .4s ease;
color: #000 !important;
position:relative;
padding:0;
margin-bottom:10px;
}
.box > a
.box span,
.box img {
display:block;
}
#caption {
width: 160px;
font-size: 15px;
text-decoration: none;
margin: 0 0 0px 5px;
}
.boximg {
width: auto;
max-width: 100%;
}
.box:hover {
width: auto;
max-width: 170px;
transition: all .4s ease;
color: #ccdc29 !important;
z-index:2;
}
.box:hover>#caption {
display:none;
}
.box:hover>#hidden {
display: block;
transition: all .3s ease;
background-color: #000;
}
#hidden {
display: none;
color: #fff;
transition: all .3s ease;
position:absolute;
left:0;
right:0;
top:100%;
padding:5px;
margin:-18px 0 0 0;
}
.box .image_off,
#home:hover .image_on {
display: none;
transition: all .4s ease;
}
.box .image_on,
#home:hover .image_off {
display: block;
transition: all .4s ease;
}
<div class="box">
<a href="#">
<span class="boximg" id="home"><img width="170px" class="image_on" src="http://kittenrescue.org/wp-content/uploads/2017/03/KittenRescue_KittenCareHandbook.jpg" /><img width="170px" class="image_off" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSH5rO0Te6nVxuBwuR352PJIKb6MeV-PDBKnVm4DBpwvd-8DPAJ"
/></span>
<br>
</a>
<p id="caption">Lorem Ipsum</p>
<p id="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin condimentum, nisi vel cursus consectetur, 7</p>
</div>
<div class="box">
<a href="#">
<span class="boximg" id="home1"><img width="170px" class="image_on" src="http://kittenrescue.org/wp-content/uploads/2017/03/KittenRescue_KittenCareHandbook.jpg" /><img width="170px" class="image_off" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSH5rO0Te6nVxuBwuR352PJIKb6MeV-PDBKnVm4DBpwvd-8DPAJ"
/></span>
<br>
</a>
<p id="caption">Lorem Ipsum</p>
<p id="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin condimentum, nisi vel cursus consectetur</p>
</div>
.img-with-text{
position: relative;
width: 170px;
}
.img-with-text > div{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0);
color: transparent;
transition: 1s;
}
.img-with-text > div:hover{
background-color: rgba(0, 0, 0, 0.6);
color: white;
}
<div class="img-with-text">
<img src="http://kittenrescue.org/wp-content/uploads/2017/03/KittenRescue_KittenCareHandbook.jpg" alt="image" width="170">
<div><h2>Hello!</h2></div>
</div>
<div class="img-with-text">
<img src="http://kittenrescue.org/wp-content/uploads/2017/03/KittenRescue_KittenCareHandbook.jpg" alt="image" width="170">
<div><h2>Hello!</h2></div>
</div>
I have a little problem with my overlay hover. It's not working well, because when i hover on .portfolio-project (text-layer) the hover on .portfolio-overlay is turning of. It's obvious but how to make it work together?
#portfolio .portfolio-grid {
padding: 0px;
}
#portfolio .portfolio-project-name {
position: relative;
background-image: url('https://s16.postimg.org/5pfokew6t/GMZlk_Sr.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 550px;
transition: ease-in .2s;
}
#portfolio .portfolio-overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(222, 39, 94, 0.0);
z-index: 1;
transition: ease-in .3s;
}
#portfolio .portfolio-overlay:hover {
background-color: rgba(222, 39, 94, 0.8);
}
#portfolio .portfolio-project {
z-index: 1;
position: absolute;
left: 15%;
top: 30%;
max-width: 70%;
text-align: center;
color: #fff;
p {
margin-top: 20px;
}
i {
margin-top: 20px;
font-size: 40px;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="sass/main.min.css">
<script src="https://use.fontawesome.com/ca1269ff60.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<section id="portfolio">
<div class="container-fluid portfolio-container">
<div class="row">
<a href="#" target="_blank">
<div class="portfolio-grid col-xs-12 col-md-4">
<div class="portfolio-overlay"></div>
<div class="portfolio-project-name">
<div class="portfolio-project">
<h2>Project Name</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis dui non tortor gravida porta at imperdiet nibh. Ut finibus sapien vel nibh porta lacinia.</p>
<i class="fa fa-angle-double-right" aria-hidden="true"></i>
</div>
</div>
</div>
</a>
</div>
</section>
You can add pointer-events: none; to your #portfolio .portfolio-project rules
#portfolio .portfolio-grid {
padding: 0px;
}
#portfolio .portfolio-project-name {
position: relative;
background-image: url('https://s16.postimg.org/5pfokew6t/GMZlk_Sr.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 550px;
transition: ease-in .2s;
}
#portfolio .portfolio-overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(222, 39, 94, 0.0);
z-index: 1;
transition: ease-in .3s;
}
#portfolio .portfolio-overlay:hover {
background-color: rgba(222, 39, 94, 0.8);
}
#portfolio .portfolio-project {
z-index: 1;
position: absolute;
left: 15%;
top: 30%;
max-width: 70%;
text-align: center;
color: #fff;
pointer-events:none;
p {
margin-top: 20px;
}
i {
margin-top: 20px;
font-size: 40px;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="sass/main.min.css">
<script src="https://use.fontawesome.com/ca1269ff60.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<section id="portfolio">
<div class="container-fluid portfolio-container">
<div class="row">
<a href="#" target="_blank">
<div class="portfolio-grid col-xs-12 col-md-4">
<div class="portfolio-overlay"></div>
<div class="portfolio-project-name">
<div class="portfolio-project">
<h2>Project Name</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis dui non tortor gravida porta at imperdiet nibh. Ut finibus sapien vel nibh porta lacinia.</p>
<i class="fa fa-angle-double-right" aria-hidden="true"></i>
</div>
</div>
</div>
</a>
</div>
</section>
You need to wrap .portfolio-project-name into .portfolio-overlay. It has to be a child of the element you are hovering over.
add the class:
.portfolio-project {
pointer-events:none;
}
1. I have a 4 column row of divs that move a little when hovered (with margin and padding). How can I keep this movement from moving the content that is below it without adding a fixed height. It is in a fluid layout so with a fixed height that allows enough room for the movement, the content below starts to get too far away as the window width is reduced and the images scale down.
2. For the bounty you need to make the jsFiddle work.
It seems that even though I have transition: all, all of the padding-bottom gets added instantly while the margin-top transitions for 300ms. Shouldn't the padding transition also? I think that would get rid of the jump. I tried transitioning height on hover for the same effect but it had the same exact issue. the height just got added instead of transitioning.
I made a jsFiddle to play with.
HTML:
<header class="sectionTitle lightboxes clearfix">
<h3><i class="i-small icon-folder-open"></i><strong>Portfolio</strong></h3>
</header>
<article id="row2fluid" role="presentation">
<section id="row2col1"> <a class="slider" href="#"><img src="http://mtctinc.com/images/folioImg1.jpg" alt="porfolio 1" />
<div class="caption">
<h3>Example 1</h3>
<span>Slider/Slideshow</span>
</div>
</a>
</section>
<section id="row2col2"> <a class="youtube" href="#"><img src="http://mtctinc.com/images/folioImg2.jpg" alt="portfolio 2" />
<div class="caption">
<h3>Example 2</h3>
<span>Youtube</span>
</div>
</a>
</section>
<section id="row2col3"> <a href="#" class="clearfix"><img src="http://mtctinc.com/images/folioImg3.jpg" alt="porfolio 3" />
<div class="caption">
<h3>Example 3</h3>
<span>Flash</span>
</div>
</a>
</section>
<section id="row2col4"> <a href="#" class="clearfix"><img src="http://mtctinc.com/images/folioImg4.jpg" alt="portfolio 4" />
<div class="caption">
<h3>Example 4</h3>
<span>HTML</span>
</div>
</a>
</section>
</article>
<div id="moreContent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget nulla laoreet, blandit massa eu, mollis tellus. Duis pellentesque dui nec diam ullamcorper, ac dignissim sapien interdum. Proin in libero nec neque fermentum varius. Integer hendrerit, justo feugiat porttitor iaculis, nisl purus luctus neque, non ultrices magna quam et magna. Proin porttitor, metus sed commodo pharetra, lacus eros aliquet diam, eu auctor nisi diam quis felis.</div>
CSS:
.sectionTitle {
border-bottom: 3px solid #e9e9e9;
width:100%;
}
.sectionTitle h3 {
font-size:11px;
text-transform:uppercase;
font-weight:bold;
border-bottom: 3px solid #3b3b3b;
display:table;
margin-bottom: -2px;
float: left;
width: 100%;
min-height: 33px;
line-height: 19px;
padding-bottom: 10px;
}
.sectionTitle strong {
display: inline-block;
padding-left:10px;
line-height:14px;
}
.lightboxes {
position: relative;
clear:both;
padding-top: 30px;
}
#row2fluid {
text-align: center;
position: relative;
float: left;
width: 100%;
}
#row2fluid img {
opacity: .8;
border: none;
-webkit-transition:all 300ms;
-o-transition:all 300ms;
-moz-transition:all 300ms;
transition:all 300ms;
}
#row2fluid a:hover img {
opacity: 1;
margin-top: -16px;
}
#row2fluid a:hover .caption h3 {
color: #F15A2B;
}
#row2fluid .caption {
border-bottom: 1px solid #E9E9E9;
margin: 0px 3px;
line-height: .7em;
padding: 14px 0 30px;
}
#row2fluid a:hover .caption {
border-bottom: 1px solid #F15A2B;
background-color: #f7f7f7;
padding-bottom: 46px;
}
#row2fluid .caption span {
font-style: italic;
font-size: 12px;
color: #ACACAC;
}
#row2col1 {
clear: both;
float: left;
margin-left: 0;
width: 24.1758%;
display: inline-block;
padding-top: 40px;
margin-top: -1px;
}
#row2col2 {
clear: none;
float: left;
margin-left: 1.0989%;
width: 24.1758%;
display: inline-block;
padding-top: 40px;
margin-top: -1px;
}
#row2col3 {
clear: none;
float: left;
margin-left: 1.0989%;
width: 24.1758%;
display: inline-block;
padding-top: 40px;
margin-top: -1px;
}
#row2col4 {
clear: none;
float: left;
margin-left: 1.0989%;
width: 24.1758%;
display: inline-block;
padding-top: 40px;
margin-top: -1px;
}
#row2col1:hover {
border-top: 3px solid #F15A2B;
padding-top: 37px;
}
#row2col2:hover {
border-top: 3px solid #F15A2B;
padding-top: 37px;
}
#row2col3:hover {
border-top: 3px solid #F15A2B;
padding-top: 37px;
}
#row2col4:hover {
border-top: 3px solid #F15A2B;
padding-top: 37px;
}
#moreContent {
clear: both;
position: relative;
float: left;
margin-left: 0;
width: 100%;
display: block;
padding-top: 20px;
}
You just need to add
-webkit-transition:all 300ms;
-o-transition:all 300ms;
-moz-transition:all 300ms;
transition:all 300ms;
to the caption as well.
See here
http://jsfiddle.net/ZuU8V/4/