I have an :after pseudo element on a element that should be working correctly.
My styles look like this:
.featured-video-link {
display: block;
max-width: 100%;
margin: 0 auto;
position: relative;
}
.featured-video-link:after {
content: " ";
display: block;
position: absolute;
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-o-transition: opacity .2s;
-ms-transition: opacity .2s;
transition: opacity .2s;
z-index: 20;
left: 50%;
top: 50%;
margin-left: -51px;
margin-top: -51px;
width: 102px;
height: 101px;
opacity: .5;
background: url(img/play-large.png);
}
.featured-video-link:hover:after {
opacity: 1;
}
And my HTML looks like this:
<div class="featured-video">
<a href="http://www.google.com" class="featured-video-link">
<img src="featured-video.jpg" class="featured-video-image" alt="Characteristics of a Design Engineer">
</a>
<div class="featured-video-title">Characteristics of a Design Engineer</div>
</div>
In the IE 8 developer tools the height attribute is somehow getting mangled into being in the same line as the background attribute and the content and top attributes share a line as well. If I remove the top attribute, the element appears, but obviously in the wrong position and there is no reason for the top attribute to get placed where it is. The z-index seems to be factoring in as well.
Related
I'm simply trying to add a button on hover but I'm stuck...
Is it possible to achive this only with CSS?? I'm using bootstrap if it helps
.card-img-top {
-webkit-filter: brightness(100%);
}
.card-img-top:hover {
-webkit-filter: brightness(40%);
-webkit-transition: all .15s ease-in-out
-moz-transition: all .15s ease-in-out
-o-transition: all .15s ease-in-out
-ms-transition: all .15s ease-in-out
transition: all .15s ease-in-out
}
<img class="card-img-top" src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png">
Yes, this is possible with CSS only. You could do it with a separate element with all the content in it (.overlay). This element is shown when there is a hover over the image-wrapper. I've used opacity and visibility together, so that a transition is possible (visibility, because opacity: 0 is still clickable).
Darkening the image can be done with a background color which is semi-transparent (rgba()). I've then positioned the wrapper of the two button elements inside the image with position absolute 50% and then moved it back half the height and width to make it appear exactly in the middle of the image. This can of course also be done with flexbox.
The two yellow buttons inside the button-wrapper are positioned next to each other with display: inline-block. If you do it like this, a line break is often added but can be removed by using white-space: nowrap.
.wrapper {
display: inline-block;
position: relative;
}
.wrapper:hover .overlay {
opacity: 1;
visibility: visible;
}
.overlay {
opacity: 0;
visibility: hidden;
transition: 0.3s ease all;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.3);
}
.overlay .button-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
white-space: nowrap;
}
.overlay .button {
width: 50px;
height: 50px;
display: inline-block;
background: yellow;
margin: 20px;
border-radius: 100px;
}
.image {
max-width: 350px;
max-height: 350px;
}
<div class="wrapper">
<img class="image" src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png">
<div class="overlay">
<div class="button-wrapper">
<div class="button"></div>
<div class="button"></div>
</div>
</div>
</div>
I've consulted these similar questions, 1, 2, 3, 4, but couldn't find the solution to my problem.
I have a simple play button and semi-transparent div transition when hovering over a block-level link which is placed over an image.
The problem is that the divs jitter when moving the mouse vertically over the image.
There are two exceptions to this behavior (in which case, the transition and div behavior run smoothly):
Moving the cursor vertically and parallel to
<span class="play">
and moving the mouse horizontally across the div.
/*------- Media Play Button -------*/
.vThumb {
position: relative;
width: 100%;
height: auto;
font-size: 0;
}
.vThumb img {
position: relative;
width: 100%;
display: block;
z-index: -1;
opacity: .5;
}
.vThumb a {
position: absolute;
top: 0;
display: block;
width: 100%;
height: 100%;
text-align: center;
text-decoration: none;
}
.vThumb a .play,
.vThumb a .vOverlay {
opacity: 0;
}
.vThumb a:hover .play {
position: relative;
font-size: 14vw;
color: #f00;
top: 50%;
transform: translateY(-50%);
z-index: 1001;
opacity: .95;
border: none;
display: block;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.vThumb a:hover ~ .vOverlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: #f00;
opacity: .3;
z-index: 1000;
display: inline-block;
transition: opacity .15s ease-in-out;
-moz-transition: opacity .15s ease-in-out;
-webkit-transition: opacity .15s ease-in-out;
}
/*------- End Media Play Button -------*/
<div class="vThumb">
<a href="#">
<span class="play">►</span>
</a>
<div class="vOverlay">
</div>
<img src="http://i.imgur.com/wZzgmVt.jpg">
</div>
Unlike the similar questions mentioned above nothing here is changing size and the issue occurs across all browsers. What am I doing wrong?
The reason you're seeing the flickering is because of the selector .vThumb a:hover ~ .vOverlay.
You are only applying styling to the .vOverlay element when hovering over the previous a element. When the .vOverlay element appears, it is positioned over the a element (which means that you are no longer hovering over the a element), resulting in it disappearing and repeating again.
You can easily prevent this by applying the styling when hovering over .vOverlay as well (rather than only applying it when hovering over the a element).
In other words, you want the following:
.vThumb a:hover ~ .vOverlay,
.vOverlay:hover {
/* ... */
}
However, that will result in the play button not being visible (since you are no longer hovering over the a element either).
You can resolve this by changing the selector .vThumb a:hover .play to .vThumb:hover .play.
Updated Example:
.vThumb {
position: relative;
width: 100%;
height: auto;
font-size: 0;
}
.vThumb img {
position: relative;
width: 100%;
display: block;
z-index: -1;
opacity: .5;
}
.vThumb a {
position: absolute;
top: 0;
display: block;
width: 100%;
height: 100%;
text-align: center;
text-decoration: none;
}
.vThumb a .play,
.vThumb a .vOverlay {
opacity: 0;
}
.vThumb:hover .play {
position: relative;
font-size: 14vw;
color: #f00;
top: 50%;
transform: translateY(-50%);
z-index: 1001;
opacity: .95;
border: none;
display: block;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.vThumb a:hover ~ .vOverlay,
.vOverlay:hover {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: #f00;
opacity: .3;
z-index: 1000;
display: inline-block;
transition: opacity .15s ease-in-out;
-moz-transition: opacity .15s ease-in-out;
-webkit-transition: opacity .15s ease-in-out;
}
<div class="vThumb">
<a href="#">
<span class="play">►</span>
</a>
<div class="vOverlay"></div>
<img src="http://i.imgur.com/wZzgmVt.jpg">
</div>
I am setting up a new homepage for my website. It will have a 2x2 grid of four images that change size with the window and they'll all have a hover text. I was able to do everything so far but I got stuck at one point, which possibly have an easy answer that I can't find. When I hover over the image, I want to make the text centered, no matter what the size of the window is. But I can not find the proper way to do it. The methods I've tried either don't center it both vertically and horizontally or the text goes off center when I resize the window. Any help would be appreciated. Thank you!
Here's my code: jsfiddle
HTML
<section id="photos">
<img src="image1"><span>GALLERY ONE</span>
<img src="image2"><span>GALLERY TWO</span>
<img src="image3"><span>GALLERY THREE</span>
<img src="image4"><span>GALLERT FOUR</span>
</section>
CSS
#photos {
/* Prevent vertical gaps */
line-height: 0;
margin-left:150px;
-webkit-column-count: 2;
-webkit-column-gap: 0px;
-moz-column-count: 2;
-moz-column-gap: 0px;
column-count: 2;
column-gap: 0px;
}
#photos img {
/* Just in case there are inline attributes */
width: 100% !important;
height: auto !important;
}
a.darken {
display: inline-block;
background: black;
padding: 0;
position:relative;
}
a.darken img {
display: block;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
a.darken:hover img {
opacity: 0.3;
}
a.darken span{visibility:hidden; font-size:16px;}
a.darken:hover span{color:#fff; visibility:visible;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
This wont work in older browsers, but you can use a combination of "translate" and absolute positioning to vertically and horizontally align the text. Just add the following:
a.darken span{
visibility:hidden;
font-size:16px;
/* new styles below: */
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
line-height: 100%;
}
Here is an example:
http://jsfiddle.net/bk2Sd/2/
You need to add these styles to the <span>:
position: absolute;
top: 50%;
left: 35%;
You can play with these values until you get it where you want. Here is a working example.
Since your a.darken selector already has relative positioning enabled, you can enable absolute positioning on the span attribute.
http://jsfiddle.net/EfrainReyes/bk2Sd/4/
a.darken span {
display: block;
height: 100%;
width: 100%;
visibility:hidden;
position: absolute;
top: 50%;
font-size:16px;
}
I added display: block and full height and width so I could use text-align: center on the a.darken selector.
I propose something little more generic.
Since the size of the images is not known we can center horizontally the text using the text-align property and then centre it vertically by using an absolutely positioned element with top set to 50%.
Code to add:
a.darken span {
width: 100%;
text-align: center;
top: 50%;
left: 0
position: absolute;
}
http://jsfiddle.net/bk2Sd/5/
I'm making a div on top of the tweet (and also the Facebook like) button. I want it to move up as soon as I hover above the div (button) so you can actually press the real tweet button. I've tried the following.
HTML:
<div class="tweet-bttn">Tweet</div>
<div class="tweet-widget">
Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
CSS:
.tweet-bttn{
position: relative;
top: -30px;
left: -10px;
display:block;
opacity: 1;
width: 80px;
padding: 10px 12px;
margin:0px;
z-index:3;}
.tweet-bttn:hover{
-webkit-animation-name: UpTweet;
-moz-animation-name: UpTweet;
-o-animation-name: UpTweet;
animation-name: UpTweet;
-webkit-animation-duration:.5s;
-moz-animation-duration:.5s;
animation-duration:.5s;
-webkit-transition: -webkit-transform 200ms ease-in-out;
-moz-transition: -moz-transform 200ms ease-in-out;
-o-transition: -o-transform 200ms ease-in-out;
transition: transform 200ms ease-in-out;}
#-webkit-keyframes UpTweet {
0% {
-webkit-transform: translateY(0);
}
80% {
-webkit-transform: translateY(-55px);
}
90% {
-webkit-transform: translateY(-47px);
}
100% {
-webkit-transform: translateY(-50px);
}
... and all other browser pre-fixes.
}
I'm not sure what's going wrong. It looks like that as soon as I hover, it moves, but if I move the cursor one more pixel, it has to do a new calculation which causes the flickering.
I don't know why you need animations for this when you can simply achieve the above using transitions
The trick is to move the child element on parent hover
Demo
div {
margin: 100px;
position: relative;
border: 1px solid #aaa;
height: 30px;
}
div span {
position: absolute;
left: 0;
width: 100px;
background: #fff;
top: 0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
}
div span:nth-of-type(1) {
/* Just to be sure the element stays above the
content to be revealed */
z-index: 1;
}
div:hover span:nth-of-type(1) { /* Move span on parent hover */
top: -40px;
}
Explanation: Firstly we wrap span's inside a div element which is position: relative;
and later we use transition on span which will help us to smooth the flow of the animation, now we use position: absolute; with left: 0;, this will stack elements on one another, than we use z-index to make sure the first element overlays the second.
Now at last, we move the first span, we select that by using nth-of-type(1), which is nothing but first child of it's kind which is nested inside div, and we assign top: -40px; which will transit when the parent div is hovered.
I am using following code to display a hidden div on hover. I'm using the CSS transition property for to fade in the hidden div. Is it possible to slide in the hidden (for example from left to right) div instead of fading in using the CSS only?
Here's my code:
HTML
<div class="box">
<img src="http://farm9.staticflickr.com/8207/8275533487_5ebe5826ee.jpg">
<div class="hidden"></div>
</div>
CSS
.box{
position: relative;
}
.box .hidden{
background: yellow;
height: 300px;
position: absolute;
top: 0;
left: 0;
width: 500px;
opacity: 0;
transition: all 1s ease;
}
.box:hover .hidden{
opacity: 1;
}
Demo:
http://jsfiddle.net/u2FKM/
Something like this?
DEMO
And the code I used:
.box{
position: relative;
overflow: hidden;
}
.box:hover .hidden{
left: 0px;
}
.box .hidden {
background: yellow;
height: 300px;
position: absolute;
top: 0;
left: -500px;
width: 500px;
opacity: 1;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
-ms-transition: all 0.7s ease-out;
-o-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
I may also add that it's possible to move an elment using transform: translate(); , which in this case could work something like this - DEMO nr2
Just to add my answer, it seems that the transitions need to be based on initial values and final values within the css properties to be able to manage the animation.
Those reworked css classes should provide the expected result :
.box{
position: relative;
top:0px;
left:0px;
width:0px;
}
.box:hover .hidden{
opacity: 1;
width: 500px;
}
.box .hidden{
background: yellow;
height: 300px;
position: absolute;
top: 0px;
left: 0px;
width: 0px;
opacity: 0;
transition: all 1s ease;
}
<div class="box">
<a href="#">
<img src="http://farm9.staticflickr.com/8207/8275533487_5ebe5826ee.jpg"></a>
<div class="hidden"></div>
</div>
http://jsfiddle.net/u2FKM/2199/
I added the vendor prefixes, and changed the animation to all, so you have both opacity and width that are animated.
Is this what you're looking for ? http://jsfiddle.net/u2FKM/3/
transition-property:width;
This should work. you have to have browser dependent code
This may be the good solution for you: change the code like this very little change
.box{
position: relative;
}
.box:hover .hidden{
opacity: 1;
width:500px;
}
.box .hidden{
background: yellow;
height: 334px;
position: absolute;
top: 0;
left: 0;
width: 0;
opacity: 0;
transition: all 1s ease;
}
See demo here