Right now I have a button with ::before and ::after pseudo-elements that is set to a 90% of the width of its parent div. However, I can't seem to get the pseudo-elements to be calculated in this 90%. Essentially, what I want is the border-box CSS rule but with pseudo-elements. Here's my code:
HTML
<button type"submit">Send</button>
CSS
.contact button {
height: 60px;
background-color: #fff;
font-weight: bold;
position: relative;
cursor: pointer;
}
.contact button::after,
.contact button::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: 3px solid #333;
-webkit-transition: -webkit-transform 0.2s;
transition: -webkit-transform 0.2s;
transition: transform 0.2s;
transition: transform 0.2s, -webkit-transform 0.2s;
}
.contact button::after {
-webkit-transform: translate(3px, 3px);
transform: translate(3px, 3px);
}
.contact button::before {
-webkit-transform: translate(-3px, -3px);
transform: translate(-3px, -3px);
}
Here's a link to my codepen: http://codepen.io/Hudson_Taylor11/pen/XpBMwM?editors=1100
Thanks!
The easiest fix I found was this:
left: 3px;
right: 3px;
For both pseudo-elements.
Related
I'm having trouble making my image clickable. I have a <figure> that is wrapped over an image and some paragraph elements. I also have some CSS such that when you hover over the figure, the paragraphs transition from bottom (off screen) to the top one at a time. I think this animation is what is keeping me from using the conventional approach of wrapping the image in anchor tags, like in this question: a href link on img.
Unfortunately, I already have a lot riding on this particular HTML configuration, so I'm not sure if radically rearranging the DOM elements will be permissible. If at all possible I would like to keep the figures, images and paragraphs in their current configuration and work around that. Here is a demo:
figure img {
width: 300px;
height: 300px;
}
figure h2 {
max-width: 235px;
}
figure {
border: 2px solid black;
margin-bottom: 0;
margin-top: -2px;
margin-right: -40px;
position: relative;
z-index: 1;
display: inline-block;
overflow: hidden;
text-align: center;
}
figure figcaption {
padding: 2em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
figure figcaption::before,
figure figcaption::after {
pointer-events: none;
}
figure figcaption {
position: absolute;
top: 0px;
left: 0;
width: 100%;
height: 100%;
}
figure p {
font-family: Play;
font-size: 20px;
max-width: 235px;
height: auto;
overflow: hidden;
position: relative;
opacity: 0;
bottom: -110%;
}
figure:hover h2 {
opacity: 0;
-webkit-transition: opacity 0.95s, -webkit-transform 0.95s;
transition: opacity 0.95s, transform 0.95s;
}
figcaption:hover p:nth-of-type(1) {
transition: 1s;
bottom: 70%;
opacity: 1;
}
figcaption:hover p:nth-of-type(2) {
bottom: 70%;
opacity: 1;
transition: 1s;
transition-delay: .3s;
}
figcaption:hover p:nth-of-type(3) {
bottom: 70%;
opacity: 1;
transition: 1s;
transition-delay: .6s;
}
figure:hover .border-rect {
opacity: 0;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
figure.effect img {
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
figure.effect:hover img {
opacity: 0.4;
}
figure.effect figcaption::before,
figure.effect figcaption::after {
position: absolute;
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
content: '';
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
figure.effect figcaption::before {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: scale(0, 1);
transform: scale(0, 1);
}
figure.effect figcaption::after {
border-right: 1px solid #fff;
border-left: 1px solid #fff;
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
}
figure.effect h2 {
opacity: 1;
-webkit-transition: opacity 0.95s, -webkit-transform 0.95s;
transition: opacity 0.95s, transform 0.95s;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
padding-top: 30%;
max-width:235px;
}
figure.effect:hover figcaption::before,
figure.effect:hover figcaption::after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
figure:hover h2 {
opacity: 0;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
<figure class="effect">
<img src="http://en.wikipedia.org/wiki/Mountain#/media/File:Lewis_overthrust_fault_nh10f.jpg">
<figcaption>
<a href="www.the-image-url.com/">
<h2>Hover Somewhere Around Here
</h2>
<p>paragraph paragraph paragraph paragraph paragraph paragraph </p>
<p>So you think you can hover, huh?</p>
<p>paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph</p>
</a>
</figcaption>
</figure>
Question
I can't quite put my finger on why I can't get the image to be clickable. I also tried wrapping the whole figure in the <a>, but it doesn't work. My goal is: if the user clicks anywhere on the figure the link will be called and I do not want to sacrifice any other elements as they currently stand. Is this at all possible? if so how?
My guess is the layering or z-index of my elements doesn't allow for this, but I hope there is a work around.
You Have Image tag that is overwritten by Overlay which is hovered and You had Given link to image that's the issue. Either You Can have link in overlay element
<figure class="effect">
<img src="http://en.wikipedia.org/wiki/Mountain#/media/File:Lewis_overthrust_fault_nh10f.jpg">
<figcaption>
<a href="www.the-image-url.com/">
<h2>Hover Somewhere Around Here
</h2>
<p>paragraph paragraph paragraph paragraph paragraph paragraph </p>
<p>So you think you can hover, huh?</p>
<p>paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph</p>
</a>
View more
</figcaption>
</figure>
Edit: add / Update Following CSS
figcaption a {
top: 0px;
left: 0;
width: 100%;
height: 100%;
text-decoration: none;
max-width: 300px;
color: #333;
position: absolute;
right: 0px;
text-align: center;
}
figure.effect h2 {
opacity: 1;
-webkit-transition: opacity 0.95s, -webkit-transform 0.95s;
transition: opacity 0.95s, transform 0.95s;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
padding-top: 30%;
max-width: 235px;
margin: auto;
}
figure p {
font-family: Play;
font-size: 20px;
max-width: 235px;
height: auto;
overflow: hidden;
position: relative;
opacity: 0;
bottom: -110%;
margin: auto;
}
I am probably not the first person in the world to have a mouse-over scroll up text animation, however, at the same time, for whatever reason, I have found next to none in terms of analogs to compare with. My particular set up uses <figure> wrapped over <figcaption> wrapped over sibling <p>'s.
The issue I'm having with my CSS is my <p>'s are not centered very well vertically after the animation completes.. That is to say, depending on how long the text inside <p> there will either be too much space above or below the list of <p>'s. Have a look at my snippet. I want the space within the figure (inside the black border) to be equal at the top and bottom, but it's not:
figure img {
width: 300px;
height: 300px;
}
figure {
border: 2px solid black;
margin-bottom: 0;
margin-top: -2px;
margin-right: -40px;
position: relative;
z-index: 1;
display: inline-block;
overflow: hidden;
text-align: center;
}
figure figcaption {
padding: 2em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
figure figcaption::before,
figure figcaption::after {
pointer-events: none;
}
figure figcaption {
position: absolute;
top: 0px;
left: 0;
width: 100%;
height: 100%;
}
figure p {
font-family: Play;
font-size: 20px;
height: auto;
overflow: hidden;
position: relative;
opacity: 0;
bottom: -110%;
}
figure:hover h2 {
opacity: 0;
-webkit-transition: opacity 0.95s, -webkit-transform 0.95s;
transition: opacity 0.95s, transform 0.95s;
}
figcaption:hover p:nth-of-type(1) {
transition: 1s;
bottom: 60%;
opacity: 1;
}
figcaption:hover p:nth-of-type(2) {
bottom: 60%;
opacity: 1;
transition: 1s;
transition-delay: .3s;
}
figcaption:hover p:nth-of-type(3) {
bottom: 60%;
opacity: 1;
transition: 1s;
transition-delay: .6s;
}
figure:hover .border-rect {
opacity: 0;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
figure.effect img {
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
figure.effect:hover img {
opacity: 0.4;
}
figure.effect figcaption::before,
figure.effect figcaption::after {
position: absolute;
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
content: '';
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
figure.effect figcaption::before {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: scale(0, 1);
transform: scale(0, 1);
}
figure.effect figcaption::after {
border-right: 1px solid #fff;
border-left: 1px solid #fff;
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
}
figure.effect h2 {
opacity: 1;
-webkit-transition: opacity 0.95s, -webkit-transform 0.95s;
transition: opacity 0.95s, transform 0.95s;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
padding-top: 30%;
}
figure.effect:hover figcaption::before,
figure.effect:hover figcaption::after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
figure:hover h2 {
opacity: 0;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
<figure class="effect">
<img src="http://en.wikipedia.org/wiki/Mountain#/media/File:Lewis_overthrust_fault_nh10f.jpg" />
<figcaption>
<h2>Hover Somewhere Around Here</h2>
<p>paragraph paragraph paragraph </p>
<p>paragraph paragraph paragraph paragraph paragraph</p>
<p>paragraph paragraph paragraph paragraph paragraph</p>
View more
</figcaption>
</figure>
Question: How do I have my <p> scroll robust to different lengths of text the <p> could have? Equivalently, how do I ensure my <p>'s scroll up and land centered vertically within the figure (the black border in the snippet)?
You've done a pretty decent job of this, can I just say first.
Regarding the centering issue, there's 32px padding on each side, so if you give the paragraph a max-width of 236 (300 -64) then the paragraphs will center fine. I set it to 235 in the snippet but add the extra pixel if you want.. :)
The different lengths question.. hmm. It caters for paragraphs of different widths. If you want to cater paragraphs for indeterminable/varied lengths, the image that you're using to create the outline will impede the potential visibility of a scrollbar if you added overflow. If I were to make a scroll-able box, I'd have probably started with a bordered div instead of a figure .. this may be an alternative route for you to take? Just a suggestion.
figure img {
width: 300px;
height: 300px;
}
figure h2 {
max-width: 235px;
}
figure {
border: 2px solid black;
margin-bottom: 0;
margin-top: -2px;
margin-right: -40px;
position: relative;
z-index: 1;
display: inline-block;
overflow: hidden;
text-align: center;
}
figure figcaption {
padding: 2em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
figure figcaption::before,
figure figcaption::after {
pointer-events: none;
}
figure figcaption {
position: absolute;
top: 0px;
left: 0;
width: 100%;
height: 100%;
}
figure p {
font-family: Play;
font-size: 20px;
max-width: 235px;
height: auto;
overflow: hidden;
position: relative;
opacity: 0;
bottom: -110%;
}
figure:hover h2 {
opacity: 0;
-webkit-transition: opacity 0.95s, -webkit-transform 0.95s;
transition: opacity 0.95s, transform 0.95s;
}
figcaption:hover p:nth-of-type(1) {
transition: 1s;
bottom: 70%;
opacity: 1;
}
figcaption:hover p:nth-of-type(2) {
bottom: 70%;
opacity: 1;
transition: 1s;
transition-delay: .3s;
}
figcaption:hover p:nth-of-type(3) {
bottom: 70%;
opacity: 1;
transition: 1s;
transition-delay: .6s;
}
figure:hover .border-rect {
opacity: 0;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
figure.effect img {
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
figure.effect:hover img {
opacity: 0.4;
}
figure.effect figcaption::before,
figure.effect figcaption::after {
position: absolute;
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
content: '';
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
figure.effect figcaption::before {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: scale(0, 1);
transform: scale(0, 1);
}
figure.effect figcaption::after {
border-right: 1px solid #fff;
border-left: 1px solid #fff;
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
}
figure.effect h2 {
opacity: 1;
-webkit-transition: opacity 0.95s, -webkit-transform 0.95s;
transition: opacity 0.95s, transform 0.95s;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
padding-top: 30%;
max-width:235px;
}
figure.effect:hover figcaption::before,
figure.effect:hover figcaption::after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
figure:hover h2 {
opacity: 0;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
<figure class="effect">
<img src="http://en.wikipedia.org/wiki/Mountain#/media/File:Lewis_overthrust_fault_nh10f.jpg" />
<figcaption>
<h2>Hover Somewhere Around Here
</h2>
<p>paragraph paragraph paragraph paragraph paragraph paragraph </p>
<p>You hovered on me! Great!</p>
<p>paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph</p>
View more
</figcaption>
</figure>
I'm trying to understand where the problem in my CSS is, but I really don't have any clue what is wrong.
Basically, I'm styling the default checkbox style with CSS. It works well until you try to check the checkbox.
The idea behind my code is when you check the checkbox, it should increase the size and change the background colour to red. In addition, it should keep the style till you unchecked the box (manually).
Do you have any idea where the problem is? In my opinion the problem is where the "input[type="checkbox"]:checked .check-box-effect {" begins.
Please find the code below
label {
display: inline-block;
color: #fff;
cursor: pointer;
position: relative;
}
label .check-box-effect {
display: inline-block;
position: relative;
background-color: transparent;
width: 25px;
height: 25px;
border: 2px solid #dcdcdc;
border-radius: 10%;
}
label .check-box-effect:before {
content: "";
width: 0px;
height: 2px;
border-radius: 2px;
background: #626262;
position: absolute;
transform: rotate(45deg);
top: 13px;
left: 9px;
transition: width 50ms ease 50ms;
transform-origin: 0% 0%;
}
label .check-box-effect:after {
content: "";
width: 0;
height: 2px;
border-radius: 2px;
background: #626262;
position: absolute;
transform: rotate(305deg);
top: 16px;
left: 10px;
transition: width 50ms ease;
transform-origin: 0% 0%;
}
label:hover .check-box-effect:before {
width: 5px;
transition: width 100ms ease;
}
label:hover .check-box-effect:after {
width: 10px;
transition: width 150ms ease 100ms;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:checked .check-box-effect {
background-color: red !important;
transform: scale(1.25);
}
input[type="checkbox"]:checked .check-box-effect:after {
width: 10px;
background: #333;
transition: width 150ms ease 100ms;
}
input[type="checkbox"]:checked .check-box-effect:before {
width: 5px;
background: #333;
transition: width 150ms ease 100ms;
}
input[type="checkbox"]:checked:hover .check-box-effect {
background-color: #dcdcdc;
transform: scale(1.25);
}
input[type="checkbox"]:checked:hover .check-box-effect:after {
width: 10px;
background: #333;
transition: width 150ms ease 100ms;
}
input[type="checkbox"]:checked:hover .check-box-effect:before {
width: 5px;
background: #333;
transition: width 150ms ease 100ms;
}
<label>
<input type="checkbox" id="chkProdTomove" />
<span class="check-box-effect"></span>
</label>
You need to change all checked selectors to this:
input[type="checkbox"]:checked + .check-box-effect:before
label {
display: inline-block;
color: #fff;
cursor: pointer;
position: relative;
}
label .check-box-effect {
display: inline-block;
position: relative;
background-color: transparent;
width: 25px;
height: 25px;
border: 2px solid #dcdcdc;
border-radius: 10%;
}
label .check-box-effect:before {
content: "";
width: 0px;
height: 2px;
border-radius: 2px;
background: #626262;
position: absolute;
transform: rotate(45deg);
top: 13px;
left: 9px;
transition: width 50ms ease 50ms;
transform-origin: 0% 0%;
}
label .check-box-effect:after {
content: "";
width: 0;
height: 2px;
border-radius: 2px;
background: #626262;
position: absolute;
transform: rotate(305deg);
top: 16px;
left: 10px;
transition: width 50ms ease;
transform-origin: 0% 0%;
}
label:hover .check-box-effect:before {
width: 5px;
transition: width 100ms ease;
}
label:hover .check-box-effect:after {
width: 10px;
transition: width 150ms ease 100ms;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:checked + .check-box-effect {
background-color: red !important;
transform: scale(1.25);
}
input[type="checkbox"]:checked + .check-box-effect:after {
width: 10px;
background: #333;
transition: width 150ms ease 100ms;
}
input[type="checkbox"]:checked + .check-box-effect:before {
width: 5px;
background: #333;
transition: width 150ms ease 100ms;
}
input[type="checkbox"]:checked:hover + .check-box-effect {
background-color: #dcdcdc;
transform: scale(1.25);
}
input[type="checkbox"]:checked:hover + .check-box-effect:after {
width: 10px;
background: #333;
transition: width 150ms ease 100ms;
}
input[type="checkbox"]:checked:hover + .check-box-effect:before {
width: 5px;
background: #333;
transition: width 150ms ease 100ms;
}
<label>
<input type="checkbox" id="chkProdTomove" />
<span class="check-box-effect"></span>
</label>
You need to target the next element when the checkbox is checked:
input[type="checkbox"]:checked + .check-box-effect {
background-color: red !important;
transform: scale(1.25);
}
Your current code is trying to target the .check-box-effect if it would be a child of the checkbox.
How can I fade in an underline on hover over a link like in the video below?
I found this CSS by using the developer console, but I can't figure out how it works.
.mainContent p>a:hover::after, .mainContent li>a:hover::after, .mainContent .text a:hover::after, .mainContent p>a:focus::after, .mainContent li>a:focus::after, .mainContent .text a:focus::after {
opacity: 1;
-webkit-transform: translateY(-2px);
-moz-transform: translateY(-2px);
transform: translateY(-2px);
}
.mainContent p>a::after, .mainContent li>a::after, .mainContent .text a::after {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 1px;
background: rgba(226,0,26,1);
content: '';
opacity: 0;
-webkit-transition: opacity 0.15s,-webkit-transform 0.2s;
-moz-transition: opacity 0.15s,-moz-transform 0.2s;
transition: opacity 0.15s,transform 0.2s;
-webkit-transform: translateY(4px);
-moz-transform: translateY(4px);
transform: translateY(4px);
}
HTML
Hallenplan
How does this work and is there a even better way?
To do this effect you need two things:
Give the a a position attribute
Animate its after element by placing it at the bottom through position: absolute and then transforming it.
One possible way is:
a {
position: relative;
text-decoration: none;
}
a:hover::after, a:focus::after {
opacity: 1;
transform: translateY(-2px);
}
a::after {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 1px;
background: black;
content: '';
opacity: 0;
transition: opacity 0.2s, transform 0.2s;
transform: translateY(4px);
}
<a href="http://www.stackoverflow.com">
StackOverflow
</a>
I am new with CSS3 animation. Currently, I'm trying to move the image in an element by 40px to left when the container is hovered, but every time the image is hovered it will give an empty space to the right side of the container. I have tried to give the image a bigger width to ensure it not giving any empty space when being hovered, but it doesn't work.
I'm not really sure how to word it, so I put a screenshot here. The red arrow shows the empty space left when the container is hovered.
Screenshot of the said problem
This is the HTML and CSS code of the said element:
HTML:
<ul>
<li class="opinion card wrapper">
<div id="card" class="opinion card container">
<div class="opinion card image variation-3">
</div>
<div class="opinion card text variation-3">
<a href="">
<h2 class="opinion card headline">
<span class="highlight">Contoh judul pendek yang agak panjang tapi panjang</span>
</h2>
</a>
<a href="/author" class="opinion card author link">
<span class="highlight noTransition">Author Name</span>
</a>
<a href="/author" class="opinion card date link">
<span class="highlight noTransition">Publication Date</span>
</a>
<p class="opinion card description">
Indoor air pollution gets surprisingly little attention for such a lethal public health problem. It kills more people each year than HIV/AIDS and malaria combined, but few countries treat it as a crisis on the same level.
</p>
</div>
</div>
</li>
</ul>
CSS
.opinion.card.wrapper {
position: relative;
display: inline-block;
float: left;
width: 25%;
margin:0;
padding: 0;
overflow: hidden;
color: white;
box-sizing: border-box;
background: transparent;
}
.card.wrapper {
height: 618px;
}
.opinion.card.container {
overflow: hidden;
height: inherit;
display: block;
margin: 15px;
position: relative;
}
.opinion.card.article.link {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
z-index: 3;
}
.opinion.card.author.link {
z-index: 1;
}
.opinion.card.image {
background: url("https://i.imgur.com/SvO0n5b.jpg") no-repeat;
background-position: center, center;
background-size: cover;
display: block;
height: inherit;
overflow: hidden;
position: absolute;
top: 0;
width: 150%;
cursor: pointer;
}
.opinion.card.image.variation-3 {
background-image: url("https://i.imgur.com/SvO0n5b.jpg");
position: relative;
float: left;
overflow: hidden;
display: block;
min-height: 100%;
max-width: 100%;
opacity: 0.8;
max-width: none;
width: 100%;
height: -webkit-calc(100% + 50px);
height: calc(100% + 50px);
-webkit-filter: contrast(1.05) brightness(1.1);
filter: contrast(1.05) brightness(1.1);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;/*
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;*/
}
.opinion.card.image.variation-2:before,
.opinion.card.image.variation-3:before {
content: "";
position: absolute;
height: 150%;
top:-200;
left: 0;
bottom: 0;
right: 0;
opacity: 0;
overflow:hidden;
}
.opinion.card.image.variation-3:before {
background-color: rgba(0,0,0,0.3);
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,50px,0);
transform: translate3d(0,50px,0);
}
.opinion.card.text {
float: left;
text-align: left;
margin: 30px 30px 45px 30px;
position: absolute;
bottom: 0;
left: 0;
}
.opinion.card.text.variation-3 {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,50px,0);
transform: translate3d(0,50px,0);
}
.opinion.card.headline {
font-family: "Patua One", "Georgia", serif;
font-size: 40px;
font-size: 2.2222rem;
color: #fff;
margin-bottom: 10px;
position: relative;
}
.opinion.card.author,
.opinion.card.date {
font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
font-size: 18px;
font-size: 1rem;
color: #505eea;
position: relative;
}
.opinion.card.description {
font-family: "Roboto", "Arial", sans-serif;
font-size: 16px;
font-size: 0.8889rem;
font-style: italic;
color: #f1f1f1;
width: 90%;
margin-top: 30px;
line-height: 1.5;
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
.opinion.card.description:before {
position: absolute;
top: -15px;
left: 0;
width: 100%;
height: 5px;
background: #fff;
content: "";
-webkit-transform: translate3d(0,40px,0);
transform: translate3d(0,40px,0);
}
.opinion.card .highlight {
background-color: #000;
padding: 5px;
}
.opinion.card.container:hover .opinion.card.image {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.opinion.card.container:hover .opinion.card.image.variation-3 {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-40px,0, 0);
transform: translate3d(-40px,0,0);
width: 100%;
}
.opinion.card.container:hover .opinion.card.image.variation-2:before {
opacity: 1;
/*background-color: rgba(0,0,0,0.2);*/
background-image: url(img/pattern_2.png);
}
.opinion.card.container:hover .opinion.card.image.variation-3:before,
.opinion.card.container:hover .opinion.card.container:after {
opacity: 1;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
}
.opinion.card.container:hover .opinion.card.container:after,
.opinion.card.container:hover .opinion.card.description:before, {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.opinion.card.container:hover .opinion.card.text.variation-3,
.opinion.card.container:hover .opinion.card.description:before {
-webkit-transform: translate3d(0,0,0) scale(1);
transform: translate3d(0,0,0) scale(1);
}
.opinion.card.container:hover .opinion.card.description,
.opinion.card.container:hover .opinion.card.container:after {
opacity: 1;
-webkit-transform: translate3d(0,0,0) scale(1);
transform: translate3d(0,0,0) scale(1);
}
.opinion.card.container:hover .opinion.card.container:after {
width: 100%;
height: 100%;
}
.opinion.card.container:hover .opinion.card.headline {
color: #505eea;
transition: 0.3s ease-in-out;
}
.opinion.card.container:hover .opinion.card.author {
transition: color 0s;
}
a.opinion.card.author:hover {
color: #fff;
transition: all 0.3s ease-in-out;
}
#media (min-width: 1280px) {
.home.container {
margin: auto;
max-width: 1200px;
}
.card.wrapper {
height: 618px;
}
.opinion.card.wrapper {
display: inline-block;
width: 33.3333333%;
min-width: 33.3333333%;
}
.opinion.card.wrapper:first-child {
width: 66.66666666666%;
}
}
JSFiddle: https://jsfiddle.net/fatzjuhe/1/
I don't own the image used here, I just took a random picture from Imgur for better viewing.
Any help will be very much appreciated. Thank you!
I have solved my own problem. Basically, I messed up with the max-width and min-width properties in the .variation-3 class. I also defined the width property of the hovered image (should be inherited from the image state before being hovered ). It works perfectly now.
.opinion.card.image.variation-3 {
background-image: url("https://i.imgur.com/SvO0n5b.jpg");
float: left;
overflow: hidden;
display: block;
width: 120%;
-webkit-filter: contrast(1.05) brightness(1.1);
filter: contrast(1.05) brightness(1.1);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
.opinion.card.container:hover .opinion.card.image.variation-3 {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-40px,0, 0);
transform: translate3d(-40px,0,0);
}
Thank you!
JSFIDDLE: https://jsfiddle.net/fatzjuhe/2/