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>
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;
}
Hi so i am trying to make a nav menu that links to other pages when clicked. But when i tell it to link somewhere i get this ugly underline and blue text. I dont want that. I have tried "text-decoration: none;" and i have searched a bit about the topic. But it didnt help :/ Thank you for any suggestions!
Here is my html:
<div id="box">
<div id="items">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Contact</div>
<div class="item">Donate </div>
</div>
</div>
<div id="btn">
<div id="top"></div>
<div id="middle"></div>
<div id="bottom"></div>
</div>
And this is the CSS
#box {
position: fixed;
z-index: 4;
overflow: auto;
top: 0px;
left: -275px;
width: 275px;
opacity: 0;
padding: 20px 0px;
height: 100%;
background-color: #f6f6f6;
color: #343838;
-webkit-transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}
#box.active {
left: 0px;
opacity: 1;
}
#items {
position: relative;
top: 35%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
text-decoration: none;
}
#items .item {
position: relative;
cursor: pointer;
font-size: 23px;
padding: 15px 30px;
-webkit-transition: all 250ms;
transition: all 250ms;
}
#items .item:hover {
padding: 15px 45px;
background-color: rgba(52, 56, 56, 0.2);
}
#btn {
position: fixed;
z-index: 5;
top: 15px;
left: 15px;
cursor: pointer;
-webkit-transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}
#btn div {
width: 35px;
height: 2px;
margin-bottom: 8px;
background-color: #F5F5F5;
-webkit-transition: -webkit-transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, box-shadow 250ms, background-color 500ms;
transition: transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, box-shadow 250ms, background-color 500ms;
}
#btn:hover > div { box-shadow: 0 0 1px #F5F5F5; }
#btn.active { left: 230px; }
#btn.active div { background-color: #343838; }
#btn.active:hover > div { box-shadow: 0 0 1px #343838; }
#btn.active #top {
-webkit-transform: translateY(10px) rotate(-135deg);
-ms-transform: translateY(10px) rotate(-135deg);
transform: translateY(10px) rotate(-135deg);
}
#btn.active #middle {
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
#btn.active #bottom {
-webkit-transform: translateY(-10px) rotate(-45deg);
-ms-transform: translateY(-10px) rotate(-45deg);
transform: translateY(-10px) rotate(-45deg);
}
You've already put your finger on it. The (default) underline is applied to the link, not #items. Those are the elements you will need to re-style:
#items .item a{
text-decoration: none;
color: inherit;
}
add to a tag text-decoration
.items a{
text-decoration: none;
color:#000;
}
I want to make a hover effect, when hover the image like this:
On the Internet found many similar examples but they all either with jquery or js. I would like to know whether it is possible to do purely with css...
UPDATE: here's a code found, but it is too big :(
.view-content {
height: 330px;
}
h2.view-title {
font-size: 3rem;
font-weight: bold;
color: #7d7a7a;
text-align: center;
text-shadow: 0 0px 0px;
}
.view {
width: 300px;
height: 200px;
margin: 10px;
float: left;
border: 5px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 0px 0px 5px #aaa;
cursor: default;
}
.view .view-mask, .view {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view a.view-info {
display: inline-block;
text-decoration: none;
padding:0;
text-align: center;
color: white;
font-size: 1.9rem;
font-weight: 600;
vertical-align: middle;
}
.view-effect .view-mask {
opacity: 0;
overflow:visible;
border:100px solid rgba(0,0,0,0.7);
box-sizing:border-box;
transition: all 0.3s ease-in-out;
}
.view-effect a.view-info {
position:relative;
top:-20px;
opacity: 0;
transition: opacity 0.3s 0s ease-in-out;
}
.view-effect:hover .view-mask {
opacity: 1;
border:100px solid rgba(0,0,0,0.7);
}
.view-effect:hover a.view-info {
opacity:1;
transition-delay: 0.3s;
}
<div class="view view-effect">
<img src="http://storage7.static.itmages.ru/i/16/0708/h_1467979220_8325708_d41d8cd98f.png" height="200" width="300" alt=""> <p></p>
<div class="view-mask">
Show project
</div>
</div>
Checkout below code as what you want or just click on below link :-
https://jsfiddle.net/ananddeepsingh/99bop25r/
HTML
<div class="box"> <img src="http://placehold.it/400x300">
<div class="overbox">
<div class="title overtext"> CSS Script </div>
<div class="tagline overtext"> Animated Text Overlay On Hover </div>
</div>
</div>
CSS
.box {
cursor: pointer;
height: 300px;
position: relative;
overflow: hidden;
width: 400px;
}
.box img {
position: absolute;
left: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.box .overbox {
background-color: #304562;
position: absolute;
top: 0;
left: 0;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity: 0;
width: 360px;
height: 240px;
padding: 130px 20px;
}
.box:hover .overbox {
opacity: 1;
}
.box .overtext {
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
transform: translateY(40px);
-webkit-transform: translateY(40px);
}
.box .title {
font-size: 2.5em;
text-transform: uppercase;
opacity: 0;
transition-delay: 0.1s;
transition-duration: 0.2s;
}
.box:hover .title,
.box:focus .title {
opacity: 1;
transform: translateY(0px);
-webkit-transform: translateY(0px);
}
.box .tagline {
font-size: 0.8em;
opacity: 0;
transition-delay: 0.2s;
transition-duration: 0.2s;
}
.box:hover .tagline,
.box:focus .tagline {
opacity: 1;
transform: translateX(0px);
-webkit-transform: translateX(0px);
}
Yes you can do that using pure CSS. for that purpose you may use :after pseudo class as,
.img-wrapper {
position:relative;
display:inline-block;
overflow:hidden;
cursor:pointer
}
.img-wrapper .hover-div{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
opacity:0;
display:inline-block;
text-align:center;
background:rgba(0,0,0,0.3);
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-o-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
}
.img-wrapper:hover .hover-div{
top:0;
opacity:1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.img-wrapper:hover img {
-webkit-filter:grayscale(1);
-moz-filter:grayscale(1);
filter:grayscale(1);
}
.mybutton{
background:#FFFFFF;
color:#111111;
padding:10px 20px;
border-radius:5px;
display:inline-block;
margin-top:100px;
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.mybutton:hover{
background:#111111;
color:#FFFFFF;
}
<div class="img-wrapper">
<img src="https://unsplash.it/200" >
<div class="hover-div">
<a class="mybutton">My Button</a>
</div>
</div>
Just use ':hover' after the element you want to show the effect on. For example, if you wanted to use it on the header you would create a new css tag called
header:hover{} and then you could put an opactiy of maybe 0.5 to make the object fade on hover. Hope this helps!
Yes it is possible only through HTML and CSS. Below there is an example code:
HTML:
<div class="imagebox">
<div class="transparent"><i class="fa fa-search" aria-hidden="true"></i>
<p>Zoom</p></div>
<img src="images/yourimage.jpg">
</div>
CSS:
.imagebox{
position: relative;
}
.imagebox:hover .transparent{
display: block;
}
.transparent{
background: rgba(0,0,0,0.5);
position: absolute;
height: 100%;
width: 100%;
display: none;
cursor: pointer;
}
.transparent i{
position: absolute;
left: 50%;
top: 30%;
color: #fff;
font-size: 20px;
}
.transparent p{
position: absolute;
left: 45%;
top: 50%;
color: #fff;
font-size: 20px;
}
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/
I have a problem with some image in safari. It is working everywhere but not in safari. I've some images on my site but on safari the image's are going way to high.
The website is development.mar-bakker.nl
<div class="col-xs-12 col-sm-4 col-md-4">
<div class="grid wow zoomIn">
<figure class="effect-bubba">
<img src="assets/images/item-2.jpg" class="img-responsive" alt="img01"/>
<figcaption>
<h2>Webshop <span>PC4U</span></h2>
<p>Lily likes to play with crayons and pencils</p>
</figcaption>
</figure>
</div>
</div>
And the css is this:
figure.effect-bubba {
background: #9e5406;
}
figure.effect-bubba img {
opacity: 0.7;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
figure.effect-bubba:hover img {
opacity: 0.4;
}
figure.effect-bubba figcaption::before,
figure.effect-bubba 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-bubba figcaption::before {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: scale(0,1);
transform: scale(0,1);
}
figure.effect-bubba figcaption::after {
border-right: 1px solid #fff;
border-left: 1px solid #fff;
-webkit-transform: scale(1,0);
transform: scale(1,0);
}
figure.effect-bubba h2 {
padding-top: 10%;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,-20px,0);
transform: translate3d(0,-20px,0);
color: #fff;
}
figure.effect-bubba p {
padding: 20px 2.5em;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,20px,0);
transform: translate3d(0,20px,0);
}
figure.effect-bubba:hover figcaption::before,
figure.effect-bubba:hover figcaption::after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
figure.effect-bubba:hover h2,
figure.effect-bubba:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
Can someone help me.
i found the error! it was by a diffent css element
.grid figure figcaption, .grid figure figcaption > a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Try to remove the max-width and min-height definitions in the .grid figure img selector
.grid figure img {
position: relative;
display: block;
/* min-height: 100%; */
/* max-width: 100%; */
opacity: 0.8;
}