.tidings {
width: 30%;
float: left;
margin: 0 3%;
}
.tidingsimg:before{
content: url("https://s4.postimg.org/466igrsgt/Tidingsrune.png");
position: relative;
transition: opacity 1s ease;
-webkit-transition: opacity 1s ease;
}
.tidingsimg:after{
content: url("https://s12.postimg.org/83p4b0ubx/Tidingsrune2.png");
position:absolute;
top: 0;margin-top: 10px;
opacity:0;
transition: opacity 1s ease;
-webkit-transition: opacity 1s ease;
}
.tidingsimg:hover:after{
opacity:1;
}
.tidingsimg:hover:before{
opacity:0;
}
<div class="tidings"></div>
I have an image that I am trying to have smoothly transition into another image using content: url. It works in changing the images abruptly, however I cannot figure out how to apply the transition to actually make it smoothly transition from one image to another. Is it possible to do this using content?
Here is a JSFiddle showing what I have going on.
You Should use Before after and set opacity and transition on them
In .tidingsimg:after class we add position:absolute and top: 0;margin-top: 10px; Because without it after style will go far below before style
.tidings {
width: 30%;
float: left;
margin: 0 3%;
}
.tidingsimg:before{
content: url("https://s4.postimg.org/466igrsgt/Tidingsrune.png");
position: relative;
transition: opacity 1s ease;
-webkit-transition: opacity 1s ease;
}
.tidingsimg:after{
content: url("https://s12.postimg.org/83p4b0ubx/Tidingsrune2.png");
position:absolute;
top: 0;margin-top: 10px;
opacity:0;
transition: opacity 1s ease;
-webkit-transition: opacity 1s ease;
}
.tidingsimg:hover:after{
opacity:1;
}
.tidingsimg:hover:before{
opacity:0;
}
<div class="tidings"></div>
Related
.Button_Image {
width: 40px;
-webkit-transition: opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-ms-transition: opacity 0.5s linear;
-o-transition: opacity 0.5s linear;
opacity: 1;
}
.Button:hover .Button_Image {
opacity: 0;
}
.Button_Name {
font-size: 18px;
color: black;
line-height: 40px;
-webkit-transition: opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-ms-transition: opacity 0.5s linear;
-o-transition: opacity 0.5s linear;
opacity: 0;
}
.Button:hover .Button_Name {
opacity: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<a href="#" class="Button btn btn-success btn-block">
<img class="Button_Image" src="https://i.stack.imgur.com/hiAkR.png">
<span class="Button_Name">Football</span>
</a>
I have a button which has 2 elements inside.
Image of a sport
Name of the sport
When either of these have the css value display: none; the visible one is aligned to center perfectly.
But I needed to add a fade-in-out functionality, so I wasn't able to use display keyword. Instead I went for opacity.
Which resulted these 2 elements to stay side by side even if one is hidden.
How can I center these, when the other one is hidden?
This image has been captured during the transmission event:
The current state is like this:
But I need it like this:
You can achieve what you want with absolute positioning of the image. Is something like this what you want?:
.sportbtn {
border: green 1px solid;
width: 150px;
height: 40px;
position: relative;
line-height: 40px;
}
.sportimg {
/* centered in button */
width: 30px;
transition: left 1s, margin-left 1s;
position: absolute;
left: 50%;
margin-left: -15px; /* half the image width */
margin-top: 5px;
}
.sportname {
transition: opacity 1s;
opacity: 0;
margin-left: 40px;
}
.sportbtn:hover .sportname {
opacity: 1;
}
.sportbtn:hover .sportimg {
margin-left: 0px;
left: 5px;
}
<div class="sportbtn">
<img class="sportimg" src="https://d30y9cdsu7xlg0.cloudfront.net/png/23344-200.png" />
<span class="sportname">Football</span>
</div>
I'm trying to change a div opacity depending on having the class active or not.
When the div has the active class, I want to change the opacity to 1. If the div does not have the active class, I want to change the opacity to 0.
Follows my CSS code:
.high-light{
position: fixed;
width: 100%;
height: 100%;
top: 0;
background-color: black;
background-color: rgba(0, 0, 0, 0.61);
opacity:0;
left: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
transition: opacity 3s linear;
}
#multicanvasArea.active .high-light {
opacity:1;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
transition: opacity 0.5s linear;
}
Thank you
[EDIT]
One of the problems was that I change the css property to "block" and "none". The other was solve by the answer choosen.
When the div has the active class, I want to change the opacity to 1. If the div does not have the active class, I want to change the opacity to 0.
You need to combine the classes like so.
As it was you have .highlight as a child of .active.
.high-light{
position: fixed;
width: 100%;
height: 100%;
top: 0;
background-color: black;
background-color: rgba(0, 0, 0, 0.61);
opacity:0;
left: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
transition: opacity 3s linear;
}
.high-light.active {
opacity:1;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
transition: opacity 0.5s linear;
}
The problem here is not the transition, it's the height 100% which is not taking effect because the parent element (body) is not tall 100%.
$('button').on('click', function(e) {
$("#multicanvasArea").toggleClass('active');
})
.high-light{
position: fixed;
width: 100%;
height: 30px;
top: 0;
background-color: black;
opacity:0;
left: 0;
color: white;
transition: opacity 3s linear;
}
#multicanvasArea.active .high-light {
opacity:1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="multicanvasArea">
<p class="high-light">Highlight</p>
<p class="">Other text</p>
</div>
<button>Toggle class</button>
Your code was 95% there, just a few tweaks I made seem to do the trick. Here is the new css:
#multicanvasArea .high-light{
position: fixed;
width: 100%;
height: 100%;
top: 0;
background-color: black;
background-color: rgba(0, 0, 0, 0.61);
opacity:0;
left: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
transition: opacity 3s linear;
}
#multicanvasArea.active .high-light {
opacity:1;
}
Here is a link to a pen with a working example:
http://codepen.io/anon/pen/pEjrJo
this is a working example. The Javascript is only to toggle the class.
.box {
width: 200px;
height: 200px;
background: pink;
opacity: 0;
transition: opacity 3s linear;
&.active {
opacity: 1;
}
}
https://plnkr.co/edit/RZRygZieCUMVWiOVEJR8?p=preview
/* CSS used here will be applied after bootstrap.css */
body{
background-color:yellow;
}
img{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
img:hover{
-webkit-filter:blur(5px);
}
<img src="http://i.stack.imgur.com/K0jNI.png">
When you hover over the image the borders of the image flash for a bit before settling.. Is there a way to fix that?
And how do i make a text show up on the middle of the image when i hover over it?
EDIT: This now looks great in Chrome
I don't think it's entirely possible to get a super clean transition when using webkit blur. I've had a lot of rendering issues and glitches when using it before. It's a resource hog too when used on a lot of elements. My advice to change your easing to linear and target only the blur. That should tighten it up a little bit.
img{
-webkit-transition: -webkit-filter 0.5s linear;
-moz-transition: -webkit-filter 0.5s linear;
-o-transition: -webkit-filter 0.5s linear;
-ms-transition: -webkit-filter 0.5s linear;
transition: -webkit-filter 0.5s linear;
}
As for the text fade in. You'll need to add in an element that is initially opacity:0; but then changed to opacity:1; when the parent block is hovered. Initial HTML changed to this:
<div class='block'>
<img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4">
<span>Hey there</span>
</div>
And the new CSS
/* CSS used here will be applied after bootstrap.css */
body {
background-color: yellow;
}
img {
-webkit-transition: -webkit-filter 0.5s linear;
transition: -webkit-filter 0.5s linear;
}
.block {
position: relative;
width: 400px;
}
.block img {
width: 100%;
}
.block span {
opacity: 0;
-webkit-transition: all .3s;
transition: all .3s;
color: white;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
left: 0;
right: 0;
}
.block:hover > span {
opacity: 1;
}
img:hover {
-webkit-filter: blur(4px);
}
Example here
http://codepen.io/jcoulterdesign/pen/58d613e80e4a768cc9e54aa1e7aaa0af
I'm trying to create a hover button using the following code and it works relatively okay in all browsers except Chrome:
<div id="blur" class="et_pb_module et-waypoint et_pb_image et_pb_animation_off et_pb_image_0 et_always_center_on_mobile et-animated">
<a href="http://vina.typesetdesign.com/wines/reserva/reserva-sauvignon-blanc/">
<img alt="" src="http://vina.typesetdesign.com/wp-content/uploads/2015/11/2015_11_17Vina_Echeverria_Reserva_Sauvignon_Blanc_V1.png">
</a>
</div>
#blur img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#blur img:hover {
opacity: .4;
z-index: 1;
}
#blur a:hover:before {
background-color: #6d8e3b;
color: #fff;
content: "Learn More";
display: block;
font-size: 12px;
margin-left: auto;
margin-right: auto;
opacity: .9 !important;
padding: 18px;
position: relative;
top: 20em;
width: 70px;
z-index: 2;
margin-top: -3em;
}
For some reason, Chrome won't let you hover over the button without it glitching out and flickering super badly. Is there an easy way around this without having to add in a separate button?
Live Page: http://vina.typesetdesign.com/wines/varietal/
Fiddle: https://jsfiddle.net/35txpy8v/
It's flickering because the element moves while you hover over it. The reason the element is moving is because of the pseudo element's positioning. To work around this, I'd suggest absolutely positioning the pseudo element relative to the parent element. In doing so, the pseudo element's position won't have any effect on the parent element.
Updated Example
#blur img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
position: relative;
}
#blur img:hover {
opacity: .4;
z-index: 1;
}
#blur a:hover:before {
content: "Learn More";
background-color: #6d8e3b;
position: absolute;
top: 50%;
margin-top: -50px;
color: #fff;
font-size: 12px;
opacity: .9;
padding: 18px;
width: 70px;
z-index: 2;
}
I am trying to do simple tooltip only with css3 and html, but the transition doesn't work. What am I doing wrong?
HTML
<p>
This has tooltip
</p>
<div class="tooltip">Tooltip content</div>
CSS
p {
width: 200px;
background-color: aqua;
padding: 10px;
margin-top: 50px;
}
div.tooltip {
position: absolute;
width: auto;
padding: 10px;
background-color: rgba(0,0,0, 0.5);
top: 0px;
display: none;
opacity: 0.0;
transition: opacity 1s;
-webkit-transition: opacity 1s;
-o-transition: opacity 1s;
-moz-transition: opacity 1s;
}
p:hover + div.tooltip {
display: block;
opacity: 1.0;
transition: opacity 1s;
-webkit-transition: opacity 1s;
-o-transition: opacity 1s;
-moz-transition: opacity 1s;
}
http://jsfiddle.net/MCDg4/
Update / Alternate solution
For a modern browser CSS3 solution you could use pseudo elements..
<span data-tooltip="I am the tooltip">This has a tooltip</span>
and
[data-tooltip]{
position:relative;
}
[data-tooltip]:before{
content:attr(data-tooltip);
position:absolute;
bottom:110%;
padding:10px;
background:#666;
opacity:0;
color:white;
font-size:smaller;
-webkit-transition:opacity 1s ease;
-o-transition:opacity 1s ease;
transition:opacity 1s ease;
pointer-events:none;
}
[data-tooltip]:hover:before{
opacity:1;
}
Demo at http://jsfiddle.net/BJ2tr/
(this could be done without pseudo-elements by nesting the tooltip inside the elements that it refers to, and adjusting the css accordingly)
Unfortunately when you change display from none to something else, you cannot have transitions.
Instead of display:none you could just offset it outside of the window (with top:-9999px) and bring it to position when showing it.
div.tooltip {
position: absolute;
width: auto;
padding: 10px;
background-color: rgba(0,0,0, 0.5);
top: -999px; /*CHANGED THIS AND REMOVED display:none*/
display: none;
opacity: 0.0;
transition: opacity 1s;
-webkit-transition: opacity 1s;
-o-transition: opacity 1s;
-moz-transition: opacity 1s;
}
p:hover + div.tooltip {
opacity: 1.0;
top: 0px; /*ADDED THIS AND REMOVED display:block*/
transition: opacity 1s;
-webkit-transition: opacity 1s;
-o-transition: opacity 1s;
-moz-transition: opacity 1s;
}
This will, however, not fade out (only in) since it moves it away on mouseout (so it actually does fade but you do not see it because it is outside the viewport)..
Explanation
You put transition only on opacity, while when changing to display:block; it is shown as a block with opacity:1; by default.
Solution
(JSFiddle)
Delete the display:none; and display:block on your tooltip element.