Dear Stackoverflow readers,
Using only CSS3, is there any way to change the text of a div after the transition is completed?
My code snippet can be viewed here:
HTML
<div class="biography">
<p>Hover For Player Info</p>
</div>
CSS3
.biography {
width: 100px;
height: 60px;
float: left;
margin: 5px;
background: #3399FF;
color: #ffffff;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
position: relative;
right: 5%;
font-weight: bold;
font-size: 15px;
text-align: center;
padding: 10px;
border-radius: 5px;
opacity: 0.4;
transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
}
.biography:hover {
width: 350px;
height: 450px;
margin: 10px 10px 0px -200px;
opacity: 1;
background: #7C7C7C;
}
JSFiddle
After the transition, I want to change "Hover For Player Info" to "Player Info".
Continuing on that, I need it to change back to "Hover For Player Info" once the mouse is no longer hovering over the div.
If there's no possible way, what skills do I need to learn to achieving what I want?
Thanks in advance!
Using jQuery:
$('.biography').hover(function(e) {
$(this).html('Player Info');
}, function(e) {
$(this).html("Hover for Player Info");
});
JSFiddle Demo
This can be done in CSS alone using :after:
.biography:after{
content:'Hover for player info';
}
.biography:hover:after{
content:'Player Info';
}
On .biograhpy hover, the content changes, and no JS is required!
JSFiddle Demo
#Tony Hello again. :) I hope your project is going well.
#Faiz has given you a good solution, but it changes the text on hover, not when the animation is complete (as you asked for in your original question). If his solution works for you, awesome; if you still want the text to change when the transition is complete, here's the code for that below and here's a working jsFiddle based off the one Faiz gave above.
$('.biography').on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(e) {
if ($(e.target).css('opacity') == 1) { // or any other style from the "hover" form
$(".player-info-msg").html('Player Info');
} else {
$(".player-info-msg").html('Hover for Player Info');
}
});
Let me know if you have any problems if you decide to implement this, and let me know if you have any further questions.
EDIT: If you want to read up more on this event, see the Mozilla docs. If you want to know more about jQuery, Javascript, etc. all of the resources #Faiz gave you are great.
Using the onTransitionEnd event helps a lot
Transition and animation have events event attached to dem
Related
The idea is to have normal text until someone mouses over, then I want a shape (which ideally I would import out of Illustrator as an .svg). So when someone mouses over "CLICK HERE" a shape would appear instead of just a color or opacity change.
Can this be done using HTML and CSS?
You could play around with something like this:
.foo{
width: 200px;
background-color: blue;
color: white;
transition: background-color 1s ease;
}
.foo:hover{
text-indent: -9999px;
background-color: red;
height: 200px;
border-radius: 50%;
}
<div class="foo">
click here
</div>
If you need further help just post more details of what you want.
I'm building a site where a seperate div is on top of another. When you hover over the top div I want it to disapear while you hover over it and you should be able to click it.
I at first thought that
opacity: 0;
and
pointer-evets: none;
would do the trick, however, with only opcaity 0; you can't click though the div, and with the pointer-events: none; it doesn't fade.
Anyone got a solution to this?
If a div is on top of another div, it will catch all of the events, even if it's at opacity:0.
You could try visibility:hidden instead, since AFAIR this actually removes a div from the layout.
EDIT: "remove from the layout" was a poor choice of words. The commenters are of course right, it's still there.
You can try like this:
$(function () {
$(".parent").click(function () {
alert("I am in Parent");
});
$(".child").click(function (e) {
alert("I am in Child");
});
});
* {font-family: 'Segoe UI';}
.parent {border: 1px solid #ccc; position: relative; padding: 50px;}
.parent .child {border: 1px solid #ccf; padding: 15px; position: absolute; left: 10px; top: 10px; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear;}
.child:hover {opacity: 0;}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div class="parent">
<div class="child"></div>
</div>
<p>Please try clicking on both the boxes. One is parent and the other is child. The child will be clickable even though it is hidden.</p>
Please try clicking on both the boxes. One is parent and the other is child. The child will be clickable even though it is hidden.
Try opacity: 0.001;.
It visually brings the exact same result than opacity:0; and has helped me short out similar situations where pointer-events: none; didn't work either.
I have been trying to design a login form and the button requires a little transition effect. There is one complexity though.
Background: I originally copied this idea from here: original form.
Notice how there is no padding (left and right) on the main container, now in my demo it was critical to have padding left and this creates a problem (will explain further).
Now here's my demo:
My version of login form (don't be scared of the 108 lines of CSS code; I'll paste the code that pertains to my problem below).
So the code that's relevant to this problem is as follows.
The HTML code:
<button class="login-button"><span>SEND</span></button>
The CSS code:
.login-button{
width: 100%;
outline: none;
border:none;
cursor: pointer;
padding: 0;
margin:0;
transition:.3s;
}
.login-input , .login-button{
height: 50px;
line-height: 40px;
transition:.3s;
}
.login-button span{
display: block;
background:red;
height: 100%;
width: 100%;
left: 0;
transition:.3s;
position: relative;
}
.login-button span:before{
content: 'ok';
position: absolute;
left: 100%;
display: block;
}
.login-button:hover span:before{
content: 'OK To go now';
position: absolute;
/*left: 0%;*/
text-align: center;
display: block;
width: 100%;
height: 100%;
}
Now if I go to the CSS styling for the main container:
I.E.
.main-login{
min-width: 200px;
max-width: 400px;
background: #533e69;
margin: 100px auto;
text-align: center;
overflow: hidden;
box-shadow: 1px 1px 10px rgba(0,0,0,.2);
padding: 0 20px;
}
and take off the padding, then the problem is solved and the transition looks perfect.
The problem
My requirements are such that I need that padding, so now what happens is when you hover over the button and the span element moves left:-100%, it's still visible in the main container.
Proposed solution
I would like it if this problem can be solved in CSS only as I don't really like cluttering my doc's with JS. So how about this.
I am new to CSS, so my solution may be less elegant:
When hovered over the button, the span overs left:-100% and than if the span can be set to display:none. Sounds simple, but my limited knowledge of CSS has got me stuck here.
You need to set the background to be transparent. It's not possible for a transition to animate the display property.
Add this css code, and it should work:
.login-button:hover span{
-webkit-transition-delay: 1s; /* Safari */
transition-delay: 1s;
transition: 2s;
background: rgba(1,1,1,0);
}
See your updated fiddle here.
Edit: I cleaned up the css a bit:
.login-button:hover span{
transition: 0.3s;
background: transparent;
}
Fiddle is here.
Transition properties are comma delimited in all browsers that support transitions:
.nav a {
-webkit-transition: color .2s, text-shadow .2s;
/* And so on... */
}
Ease is the default, so you don't have to specify it. If you really want linear, you will need to specify it, i.e. -webkit-transition: color .2s linear, text-shadow .2s linear;
Or try this
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
This is the link
This website is based on wordpress
http://www.gear-rat.com/
How can I get that image effect can anyone help me? in HTML5 and CSS3
I just started web design and am still learning by copying good websites so I can get handy with web design, ofc I'm not selling them or anything illegal
That effect is done with the following code:
JavaScript:
jQuery(document).ready(function() {
function tz_overlay() {
jQuery('.post-thumb a').hover( function () {
jQuery(this).find('.overlay').stop().animate({ opacity: 1 }, 200);
}, function () {
jQuery(this).find('.overlay').stop().animate({ opacity: 0 }, 200);
});
}
tz_overlay();
});
CSS:
.post-thumb a span.overlay
{
background: rgba(0, 0, 0, 0.8);
position: absolute;
width: 100%;
height: 60%;
display: block;
line-height: 20px;
z-index: 5;
filter: alpha(opacity=0);
-khtml-opacity: 0;
-moz-opacity: 0;
opacity: 0;
text-align: center;
padding-top: 40%;
color: #ada89c;
font-size: 15px;
font-weight: bold;
}
HTML:
<div class="post-thumb port-thumb">
<a href="http://www.gear-rat.com/test/portfolio/steel-riveted-box/">
<span class="overlay" style="opacity: 0;">Steel Riveted Box</span>
<img src="http://www.gear-rat.com/test/wp-content/uploads/2013/06/boxthumb1.jpg" alt="Steel Riveted Box" style="opacity: 1;">
</a>
</div>
How I found the code:
I looked at the images and noticed they all had a class called overlay, so I looked in the .js files for any mention of overlay and saw it being used in the tz_overlay function. So I copied that function and the div surrounding an image to my website. When I opened a page with that div in it, it worked like that website so I know I had it.
It is a good idea to look around for specific indicators like that when trying to find out how something works on a website.
You can solve this with only html and css3, you don't need javascript or a javascript library.
<html>
<head>
<title>hello world</title>
<style type="text/css">
div#tmp{
background-color: #A36333;
height: 100px;
width: 100px;
}
div#tmp div{
background-color: #000000;
height: 100%;
width: 100%;
color: #ffffff;
line-height: 100px;
vertical-align: middle;
text-align: center;
opacity: 0.0;
transition: opacity 0.2s linear 0s;
-webkit-transition: opacity 0.2s linear 0s;
-ms-transition: opacity 0.2s linear 0s;
-moz-transition: opacity 0.2s linear 0s;
}
div#tmp div:hover{
height: 100%;
width: 100%;
opacity: 0.6;
}
</style>
</head>
<body>
<div id='tmp'>
<div>hello world</div>
</div>
</body>
</html>
The transition property defines how elements in html change.
http://www.w3schools.com/css/css3_transitions.asp
To alter an element by mouse over you can use the css :hover selector in css.
http://www.w3schools.com/cssref/sel_hover.asp
Check out this fiddle:
http://jsfiddle.net/5tmt98sk/
Visit the JS Fiddle page
When you are on the jsfiddle page, put your mouse over the image
The website you looked at does the same thing, but there image is the same image, but they photoshop it to be darker, and the photoshop some text on to it.Same concept =)
Here is the site I'm working on: revistapuerto
It's a Wordpress based site. What I'm trying to achieve through CSS, is to get the excerpt to appear over the picture when you hover over the Title of the post. Right now, the excerpt appears when you hover over the picture only. Want to keep that effect, and add the Title thing.
The picture - excerpt effect I got it from another user here, and here is the CSS in case it helps:
#magia {
position: relative;
}
#magia img {
display: block;
}
#magia .cornerLink {
width:494px;
height:330px;
opacity: 0;
position: absolute;
top: 32px;
left: 0px;
right: 0px;
padding: 0px 0px;
background-color: rgba(0,0,0,0.50);
text-decoration: none;
text-align: center;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
#magia:hover .cornerLink {
opacity: 1.0;
}
Thanks!
Honestly the question isn't very clear, you're gonna need to give more information. All I can really offer in regards to what you've asked is basic fiddle: http://jsfiddle.net/MBLZx/
HTML:
<div class="showhim">HOVER ME
<div class="showme">hai</div>
<div class="ok">ok</div>
</div>
CSS:
.showme{
display: none;
}
.showhim:hover .showme{
display : block;
}
.showhim:hover .ok{
display : none;
}
(also the website won't load for me, could just be my work computer!)
that shows how to use hidden divs to make divs appear using a hover.
More information and I might be able to help you out :)
If I understood what you want, here's how you can achieve it.
#div-for-hover:hover #Div-you-want-to-show {
display: block;
}
The method is simple: The block of CSS code simply says when you hover of #div-for-hover, I'll show #Div-you-want-to-show
Note: The hover could be on a headings, DIVs, images, and more.