in my present code, button initially is visible and with the transition, it becomes hidden behind the box. What i want is "my button initially should be hidden and should appear with the transition". Thanks in advance..
P.S. No jQuery
<!DOCTYPE HTML>
<body>
<div id="anim">
</div>
<input type="button" value="this should be behind" id="btn" />
</body>
</html>
<style>
#anim{
z-index: 1;
position: absolute;
width: 300px;
height: 200px;
background-color: red;
-webkit-transition: all 2s;
-moz-transition: all 2s;
-ms-transition: all 2s;
-o-transition: all 2s;
transition: all 2s;
}
#anim:hover{
height:400px
}
#btn{
z-index: -1;
position:fixed;
margin-top: 300px;
}
</style>
You can set the opacity of the button on hover without changing the structure of your document using the adjacent sibling selector.
Here's how:
#anim:hover + #btn
{
opacity: 1;
}
Edit: You can also delay this using transition-delay on the button:
#btn
{
opacity: 0;
transition-delay: 700ms;
z-index: 2;
position:fixed;
margin-top: 300px;
}
Below is the complete CSS, as some changes were also made to initially hide the button, and to properly set the z-index property.
JSFiddle here.
#anim{
z-index: 1;
position: absolute;
width: 300px;
height: 200px;
background-color: red;
-webkit-transition: all 2s;
-moz-transition: all 2s;
-ms-transition: all 2s;
-o-transition: all 2s;
transition: all 2s;
}
#anim:hover{
height:400px
}
#anim:hover + #btn{
opacity: 1;
}
#btn{
opacity: 0;
transition-delay: 700ms;
z-index: 2;
position:fixed;
margin-top: 300px;
}
I think this is what you want:
#anim{
width: 300px;
height: 200px;
background-color: red;
-webkit-transition: width 2s ease;
-moz-transition: width 2s ease;
-ms-transition: width 2s ease;
-o-transition: width 2s ease;
transition: width 2s ease;
}
#anim:hover{
width: 600px;
}
#btn{
margin-left: 100px;
margin-top: 100px;
opacity:0;
-webkit-transition: opacity 2s linear;
-moz-transition: opacity 2s linear;
-ms-transition: opacity 2s linear;
-o-transition: opacity 2s linear;
transition: opacity 2s linear;
}
#anim:hover #btn{
opacity:1;
}
and add your button inside #anim div, just like this:
<div id="anim">
<input type="button" value="this should be behind" id="btn" />
</div>
and all this without javascript, only css.
JSBIN
Related
I'd like to make an image held within a div brighten but do so while hovering the div only, so that only the image within the div changes. My code may be a little sloppy but here it is, thank you.
#textimg{
background-image: url('images/stock1.jpg');
height:100%;
width:100%;
min-height: 340px;
max-width: 400px;
}
#textimg:hover{
-webkit-filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.3));
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
#textimg img:hover{
-webkit-filter: brightness(140%);
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
<div id="textimg">
<img src="images/sometext.png">
</div>
use this :
#textimage:hover img {
-webkit-filter: brightness(140%);
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
The term you are looking for is opacity.
Change the opacity vale on hover and it works.
There is an example for your reference:-
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
change your div according to the needs
Try adding a class to the image
body,html{
margin: 0;
height: 100%;
}
.container{
width: 100%;
height: 90%;
}
.img1{
width: 100%;
height: 100%;
transition: opacity 2s;
}
.img1:hover{
opacity: 0.5;
}
<div class="container">
<img src="https://images.pexels.com/photos/162389/lost-places-old-decay-ruin-162389.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" class="img1" />
</div>
.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>
/* 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
So, here is the deal.. I have a simple radio and a hidden div
<input type="radio" name="picture" id="radio-id" selected="false">
<label id="label-id" for="radio-id"></label>
<div class="some-class">
</div>
with CSS:
.some-class{
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
display:none;
background: white;
opacity: 0.7;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}
#radio-id:checked ~ .some-class{
display: block;
background: rgb( 40, 44, 47 );
}
The problem here is that, when the radio is checked, there is no transition at all. The Div appears with the new background, but its not smoothly.
Replace the css with the following
#radio-id:checked ~ .some-class {
display: block;
background: rgb( 40, 44, 47 );
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0.7;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}
html
<html>
<input type="radio" name="picture" id="radio-id" selected="false">
<label id="label-id" for="radio-id"></label>
<div class="some-class">
hello
</div>
</html>
Css
.some-class{
position: fixed;
top: 100px;
left: 100px;
height:100px;
width: 100px;
display:none;
background: white;
opacity: 0.7;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}
#radio-id:checked ~ .some-class{
display: block;
background: rgb( 40, 44, 47 );
}
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.