I have div that is hidden and appears when you hover over another div.
When the hidden div appears I also want to have a slide up transition.
I have created this https://jsfiddle.net/dx34fn5q/
HTML
<div class="clickhere">Hover here</div>
<div class="showme">Show me</div>
CSS
.showme {display: none;}
.clickhere:hover + .showme {display: block;}
What additional CSS would I need to add to make the slide up transition?
An example of the transition I want to achieve can be seen on the icons section (second row) of this website
Instead of hiding the element with display: none you can hide it with opacity: 0 and offset it with transform: translateY(100%) and then smoothly animate those properties with a CSS transition on hover:
.showme {
opacity: 0;
transform: translateY(100%);
transition: transform 0.5s, opacity 0.5s;
}
.clickhere:hover + .showme {
opacity: 1;
transform: translateY(0);
}
<div class="clickhere">Hover here</div>
<div class="showme">Show me</div>
Related
I have html like this:
<div class="projectThumb">
<div class="textContainer">
<h1>Header1</h1>
<h2>▪ Header2a ▪ Header2b ▪</h2>
</div>
<a class="project1 video" href="https://player.vimeo.com/video/xxxxxx?transparent=0"><img src="Thumbnails/project1.png"></a>
</div>
Clicking the <a> tags with class="video" trigger a JS plugin that opens a video player within the page.
My CSS looks like this:
.projectThumb img {
width: 100%;
height: 100%;
object-fit: cover;
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-o-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.projectThumb img:hover {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0.2)";
filter: alpha(opacity=0.2);
opacity: 0.2;
}
When you hover over the <img> within the <a> (which takes up the whole projectThumb), the <img> opacity decreases revealing the text, but the image still bleeds through the text because the image is still on top of it. Is there a way to change the z-index of one of the elements to avoid having it bleed through? I've tried adding the following to CSS:
.projectThumb a:hover {
z-index: -999;
}
I've also tried adding z-index to .projectThumb img:hover like this:
.projectThumb img:hover {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0.2)";
filter: alpha(opacity=0.2);
opacity: 0.2;
z-index: -999;
}
Neither work. I can bring the text to the front by setting the z-index of .textContainer h1, .textContainer h2, .textContainer h3, which does bring the text to the front, but I don't know how to trigger that on projectThumb img:hover so that it's only on top of the image on hover. I'd also like the entire <div> to remain clickable, even the text portion. When I bring the text to the front using z-index, the text area isn't clickable because it's on top of the <a>.
Not sure if its anywhere else in the CSS but I don't see any positioning.
In order for z-indexing to work you need to have some sort of position set.
Add position: relative to any of the classes you want to apply z-indexing to.
.projectThumb a, .projectThumb img {
position: relative;
}
If you really want to use z-index for that, you may use variables:
:root {
--thumbIndex: 0;
}
.projectThumb {
z-index: var(--thumbIndex);
}
a:hover {
--thumbIndex: -999;
}
I think thou, better idea will be to use the display property instead.
I'm trying to make a button which, on hover, will go up 5px.
It works fine with transitions. But the problem is that, when I hover my mouse on the lower part of the button, as soon as I move the mouse (I'm guessing it checks :hover on mouse update, but I'm new to CSS...), since the button has gone up, it realizes it no longer hovers, so it snaps back into position, and it ends up flickering.
.btn {
display:inline-block;
transform: translate(0px,0px);
transition: transform 50ms ease ;
}
.btn:hover {
transform: translate(0px,-5px);
transition: transform 50ms ease ;
}
<button class="ui button btn"> That rocks!</button>
How can I prevent this behavior? Only possible solution I've found is to use display: inline-block, but it doesn't seem to make any difference.
Also, I've tried using a container div, but it still does the same thing.
Seems to work OK with a container, if you monitor :hover on the container, then transform the button. And you only need to define transition and transform once each.
.btn {
display: inline-block;
transition: transform 50ms ease;
}
div:hover .btn {
transform: translate(0px, -5px);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div>
<button class="ui button btn"> That rocks!</button>
</div>
Put the button into a container, and make it so when you hover over the container it changes the child button:
.container:hover .btn {
transform: translate(0px,-5px);
}
If you set the hover event on the container it should work.
.btn {
display:inline-block;
transform: translate(0px,0px);
transition: transform 50ms ease ;
}
div {
transition: transform 50ms ease ;
background: pink;
}
div:hover .btn {
transition: transform 50ms ease ;
transform: translate(0px,-5px);
}
<div>
<button class="ui button btn"> That rocks!</button>
</div>
When hovering, add an ::after pseudoelement with these styles:
.btn:hover::after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 10px;
}
It will keep the focus on the button.
Snippet:
.btn {
display:inline-block;
transform: translate(0px,0px);
transition: transform 50ms ease;
}
.btn:hover::after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 10px;
}
.btn:hover {
transform: translate(0px,-5px);
transition: transform 50ms ease ;
}
<button class="ui button btn"> That rocks!</button>
Hi i'm just a student I just wanna know if its possible to combine hover, transition, and transform by just using css.
How can transformed image transitioned back to it's original size and shape when hovered?
<html>
<style>
.sample {
display: inline-block;
border: 0px solid #fff;
margin: 10px;
overflow: hidden;
height: 500px;
width: 140px;
transform: rotate(0deg);
webkit-transition: 0.8s;
transition: 0.7s;
}
.sample img {
display: block;
transform: rotate(2deg);
transform-origin: 200% -600%;
}
.sample img:hover {
width: 600px;
height: 600px;
transform: rotate(0deg);
transform-origin: 0% 0%;
-webkit-transition-timing-function: ease-in-out;
}
</style>
<body>
<div class="sample">
<img src="http://www.freegreatpicture.com/files/39/1264-tree.jpg" height="600" width="600">
</div>
</body>
</html>
If you only define the CSS "transformed" rules in the hover pseudo-class, then when the image is no longer being hovered-over it will automatically transition back to its original state.
Here is a simplified example using part of your code (I changed the image to the Wikipedia logo since your image was coming up broken):
.sample img {
transform: rotate(30deg);
transition: ease-in-out 700ms;
}
.sample img:hover {
transform: rotate(0deg);
}
<div class="sample">
<img src="https://en.wikipedia.org/static/images/project-logos/enwiki.png">
</div>
The hover pseudo-class is an "active state class", meaning it only comes into play while that action is taking place (i.e., the pointer is hovered over the element).
If you want to include special easing and timing rules on the change from default state to hovered state then include the transition property in the default rule. You can specify lengths of time over which the transition takes place so the change can be more "animated". You'll notice that in the example above I stretched the rotation to 700ms so you can see it turning when hovered, then turning back when no longer hovered.
I have following class in CSS file :
.grid-container-columns:hover .column-container-wrap, .grid-container-columns.active .column-container-wrap {
height: 400px;
-webkit-transition: height 0s;
-moz-transition: height 0s;
-o-transition: height 0s;
transition: height 0s; }
/* line 369, ../scss/_general.scss */
.grid-container-columns:hover .column-container, .grid-container-columns.active .column-container {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0); }
and following HTML
<div id="divColumns" class="grid-container-columns">
<div class="column-btn">
<span class="fa fa-th-list"></span> Kolommen
</div>
<div class="column-container-wrap">
<div class="column-container"></div>
</div>
</div>
When I hover in the above div(having id="divColumns"), content of the div displays. I want to deactivate the hover effect and don't want to display the content but don't want to remove CSS class because its used in other pages..
I have tried following in my HTML page:
$(".grid-container-columns").hover(function (event)
{
event.preventDefault();
})
But it doesn't working. How can i stop displaying content of div in hover effect??
Just exclude that div using its id in your class. This can be done by the CSS negation selector :not().
Instead of:
.grid-container-columns:hover { ...
Do this:
.grid-container-columns:not(#divColumns):hover { ...
Demo Fiddle: http://jsfiddle.net/abhitalks/ujjamg9y/
Notice in the demo that the first div doesn't respond to hover, but the second one does.
I'm using a CSS hover effect on buttons and menu-links. The links work fine because they are anchor tags, while the buttons do not work since they are used in forms as input[type=submit].
The HTML:
<div class="submit">
<span data-hover="Send">
<input type="submit" value="Send">
</span>
</div>
The .submit-wrapper class is used for decoration (as seen in the CSS below), while the span applies the actual hover effect.
The CSS:
.submit /* Need this to hide the second text -- otherwise it will show beneath */ {
overflow: hidden;
}
.submit > span {
position: relative;
display: block;
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;
}
.submit > span::before /* The effect in place */ {
padding-top: 49px;
content: attr(data-hover);
position: absolute;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
left: 28px;
top: 0;
letter-spacing: normal;
}
.submit:hover > span, .submit:focus > span /* The actual effect on hover */ {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
transform: translateY(-100%);
}
Here's the problem: I cannot click on the button. It shows the default cursor and completely ignores the fact that it's a button (an input submit type). So I have two questions:
1. Is it possible to use an anchor tag instead of an input type="submit"?
2. If not, how do I make the input type="submit" clickable?
For me, when I put that into jsfiddle, I can't click the button because your translate is moving it offscreen. When I remove that I can click the button just fine.
Otherwise, you can use a link that has jQuery attached to it so when it's clicked, submit the form. see http://api.jquery.com/submit/