Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
so I have got a sidebar nav that when the page loads, it slides out of the screen, and then when the user hovers over the area, the nav slides back on screen. However, when the nav slides off, if the user hovers over the nav during the slide off animation, the nav starts to flicker in and out as it tries to do both animations. I am wondering if there is a way to prevent this and/or disable the :hover during the slide out animation?
Sidebar asp.net
<div class="col-sm-3 col-md-2 sidebar slider">
<h5 style="font-family: Helvetica; text-transform: uppercase">Releases</h5>
<asp:CheckBoxList runat="server" ID="releaseStatusFilter" AutoPostBack="true" RepeatDirection="Horizontal" CellPadding="6" Height="5" style="margin-left:-10px">
<asp:ListItem Text="Future" Value ="Future" Selected="true"></asp:ListItem>
<asp:ListItem Text="Current" Value ="Current" Selected="true"></asp:ListItem>
<asp:ListItem Text="Completed" Value ="Completed" Selected="false"></asp:ListItem></asp:CheckBoxList>
<script type="text/javascript"></script>
<asp:ListView runat="server" ID="releaseList" style="float:left;">
<ItemTemplate>
<ul class="nav navbar nav-sidebar goo-collapsible" >
<li><a href='<%# "Release.aspx?rn="+ Eval("releaseNumber") %>'><%# Eval("releaseNumber") + " " + Eval("releaseShortName") %></a></li>
</ul>
<script type="text/javascript">
var param = location.search.split('rn=')[1]
param = param.split('%20').join(' ')
$('ul').find('a[href="Release.aspx?rn=' + param + '"]').parents('li').addClass('active');
</script>
</ItemTemplate>
</asp:ListView>
</div>
css
.sidebar {
display: none;
}
#media (min-width: 768px) {
.sidebar {
font-size: 12px;
position: fixed;
top: 120px;
width: 175px;
bottom: 0;
left: 0px;
display: block;
padding: 10px;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
background-color: #ccc;
border-right: 1px solid #eeeeee;
-webkit-animation: bannermoveout 0.5s linear both;
animation: bannermoveout 0.5s linear both;
}
}
#keyframes bannermoveout {
0% {
transform: translate3d(0px, 0px, 0px);
animation-timing-function: ease-in;
}
50% {
transform: translate3d(-92px, 0px, 0px);
animation-timing-function: ease-in-out;
}
100% {
transform: translate3d(-185px, 0px, 0px);
animation-timing-function: ease-in-out;
}
}
#-webkit-keyframes bannermoveout {
0% {
transform: translate3d(0px, 0px, 0px);
animation-timing-function: ease-in;
}
50% {
transform: translate3d(-92px, 0px, 0px);
animation-timing-function: ease-in-out;
}
100% {
transform: translate3d(-185px, 0px, 0px);
animation-timing-function: ease-in-out;
}
}
.sidebar:hover {
-webkit-animation: bannermove 0.5s linear both;
animation: bannermove 0.5s linear both;
}
#keyframes bannermove {
0% {
transform: translate3d(-185px, 0px, 0px);
animation-timing-function: ease-in;
}
50% {
transform: translate3d(-92px, 0px, 0px);
animation-timing-function: ease-in-out;
}
100% {
transform: translate3d(0px, 0px, 0px);
animation-timing-function: ease-in-out;
}
}
#-webkit-keyframes bannermove {
0% {
transform: translate3d(-185px, 0px, 0px);
animation-timing-function: ease-in;
}
50% {
transform: translate3d(-92px, 0px, 0px);
animation-timing-function: ease-in-out;
}
100% {
transform: translate3d(0px, 0px, 0px);
animation-timing-function: ease-in-out;
}
}
So i managed to fix it by using jquery to animate the sidebar menu instead of css. Thanks everyone for you help!
Jquery:
$(document).ready(function () {
$(".slider").animate({
left: '-185px'
}, "fast")
$("#slidebody").animate({
left: '0px'
}, "fast")
.queue(function () {
$(".slider").hover(function () {
$(".slider").stop().animate({ left: '0px' });
$("#slidebody").stop().animate({ left: "60px" });
$(this).dequeue();
}, function() {
$(".slider").stop().animate({ left: '-185px' });
$("#slidebody").stop().animate({ left: "0px" });
});
});
});
**The slidebody tag was just so that i can shift the container so that the nav didnt overlap the container. **
Maybe by using the .stop() function. Check this out : http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup
Try the following CSS, rewritten to use transitions (I've removed the #mediaquery):
.sidebar {
font-size: 12px;
position: fixed;
top: 20px;
width: 175px;
bottom: 0;
left: 0px;
display: block;
padding: 10px;
overflow-x: hidden;
overflow-y: auto;
background-color: #ccc;
border-right: 1px solid #eeeeee;
/* v magic starts there v */
transition: ease-in-out 0.5s transform;
-webkit-transition: ease-in-out 0.5s transform;
transform: translate3d(-185px, 0px, 0px);
-webkit-transform: translate3d(-185px, 0px, 0px);
}
.sidebar:hover {
transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
}
<div class="col-sm-3 col-md-2 sidebar slider">
<h5 style="font-family: Helvetica; text-transform: uppercase">Releases</h5>
</div>
You are hammering a screw! It isn't meant for being nailed, but it gets the job done. But not as well as a nail would.
Transitions were designed for this, and not animations.
Animations are meant to animate the element.
Transitions are meant for smoothly transition between states.
Besides, this is so much shorter!
As an optimization, I would use margins instead.
Like the following:
.sidebar {
font-size: 12px;
position: fixed;
top: 20px;
width: 175px;
bottom: 0;
left: 0px;
padding: 10px;
overflow-x: hidden;
overflow-y: auto;
background-color: #ccc;
border-right: 1px solid #eeeeee;
/* v magic starts there v */
transition: ease-in-out 0.5s margin-left;
-webkit-transition: ease-in-out 0.5s margin-left;
margin-left:-185px;
}
.sidebar:hover {
margin-left: 0px;
}
<div class="col-sm-3 col-md-2 sidebar slider">
<h5 style="font-family: Helvetica; text-transform: uppercase">Releases</h5>
</div>
You can always try unbinding the hover event with jQuery. When you do this, you're essentially telling the element to no longer respond to an event until you rebind it. Here's a really general example:
//when the animation begins, unbind the hover event
$("sidebar").bind("animationstart", $(".sidebar").unbind("hover"));
//now, when the animation ends, rebind the hover event and call the function (in this case fxn())) that should fire on the hover event
$("sidebar").bind("animationend", $(".sidebar").bind("hover", fxn));
Does that help?
Related
I have a 3 chevron animation sequence set up for a back button I designed. The animation triggers on hover exactly the way I want it to but it doesn't respect the ease-out part of the animation property when I hover off of the button. I know that typically with CSS animations you fix this by putting the animation on the actual element and not the :hover state but the problem with that is that the keyframe animation triggers on page load and gets a little wonky on :hover. Is there a mouse-out or hover-out-like state that I could use so that when the user moves away from the button the animation eases out or even reverses? I tried adding animation-direction: reverse; property to the base elements but that doesn't do anything, probably because it doesn't know what animation I'm referring to because it's not present in the base elements for the reasons above. Do I possibly need some CSS or javascript to prevent the animation from triggering until the :hover state actually occurs and then I could place the animation in the base elements instead of the :hover state?
https://jsfiddle.net/astombaugh/L7k1r63f/54/
<body style="background-color: #214365">
<div class="backBtn">
<div class="chevronContainer">
<div class="backBtnChevronTop"></div>
<div class="backBtnChevronMid"></div>
<div class="backBtnChevronFar"></div>
</div>
Back
</div>
</body>
#import url('https://fonts.googleapis.com/css2?family=Oswald:wght#700&display=swap');
.backBtn {
font-family: Oswald, Univers, Helvetica Neue, Helvetica, Arial;
display: inline-block;
position: absolute;
left: 4rem;
font-weight: 700;
width: auto;
height: auto;
color: white;
background-color: transparent;
padding: 0.2rem 0em 0.1rem 0em;
margin: 0rem 0rem 0rem 0rem;
text-align: center;
text-decoration: none;
font-size: 1.6em;
word-spacing: normal;
cursor: pointer;
}
.chevronContainer {
display: inline-block;
position: relative;
transform: translateY(-1.3rem) translateX(-1rem);
}
.backBtnChevronTop {
content: url(https://i.imgur.com/YHZi17i.png);
filter: invert(1);
position: absolute;
opacity: 1;
height: 1.33rem;
width: 1.33rem;
}
.backBtnChevronMid {
content: url(https://i.imgur.com/YHZi17i.png);
filter: invert(1);
position: absolute;
opacity: 0;
height: 1.33rem;
width: 1.33rem;
animation-direction: reverse;
}
.backBtnChevronFar {
content: url(https://i.imgur.com/YHZi17i.png);
filter: invert(1);
position: absolute;
opacity: 0;
height: 1.33rem;
width: 1.33rem;
animation-direction: reverse;
}
.backBtn:hover .backBtnChevronMid {
animation: animateChevronMid 0.6s ease-in-out;
animation-fill-mode: forwards;
}
.backBtn:hover .backBtnChevronFar {
animation: animateChevronFar 0.6s ease-in-out;
animation-fill-mode: forwards;
}
#keyframes animateChevronTop {
0% {
transform: translateX(0rem);
opacity: 0;
}
70%,
100% {
transform: translateX(0);
opacity: 1;
}
}
#keyframes animateChevronMid {
0% {
transform: translateX(0);
opacity: 0;
}
70%,
100% {
transform: translateX(-0.7rem);
opacity: 1;
}
}
#keyframes animateChevronFar {
0% {
transform: translateX(0);
opacity: 0;
}
70%,
100% {
transform: translateX(-1.4rem);
opacity: 1;
}
}
You can probably resolve this by adding the transition on element when there is no hover at the moment and tweak a little the keyframes. Like this:
.backBtn .backBtnChevronMid {
animation: animateChevronMid2 0.6s ease-in-out;
animation-fill-mode: forwards;
}
.backBtn .backBtnChevronFar {
animation: animateChevronFar2 0.6s ease-in-out;
animation-fill-mode: forwards;
}
#keyframes animateChevronMid2 {
0% {
transform: translateX(-0.7rem);
opacity: 1;
}
70%,
100% {
transform: translateX(0);
opacity: 0;
}
}
#keyframes animateChevronFar2 {
0% {
transform: translateX(-1.4rem);
opacity: 1;
}
70%,
100% {
transform: translateX(0);
opacity: 0;
}
}
this additional keyframes are exact opposite of the keyframes that you have done. And they do apply when you move your cursor from the element (so on hover off so to speak).
Jacck is right and beat me to it.
You can use that, and add a fadeIn transition to the back button itself. It's hacky but put this on the back button:
animation: fadeIn 0.6s ease-in-out;
And tweak the animation accordingly. It'll run once. If you don't want a fade just move the "stop" close to the end and this controls the container that holds the other animations so your whole effect won't show until it has loaded:
#keyframes fadeIn {
0% {opacity:0;}
95% {opacity: 0}
100% {opacity:1;}
}
Question Image
I want to achieve such zoom functionality in Html and CSS only because where I want to implement this doesn't supports JavaScript. Is this possible ?
Today all about is JS. But you can do wonderful things in CSS only and ...
Of course YOU CAN DO EXACTLY THAT in vanillaCSS
Here are TWO demonstration examples.
Louping effect on the image itself. That works in fluent layouts and mostover is the chosed solution.
The demonstration for the louping effect you asked for. That is a boxed design with a setup done in css vars. So, if you want to make it repsonsive up to now you need to define the css vars to the different breakpoints. (Head up: the loupe box has to be placed in the container as in the example and is actual shown below the original image. But you are free to position it anywhere else - i.e. by positioning it absolute/fixed/floated ... - as the html structure keeps untouched.)
Notice: more scaling up as it is needed is not a problem to both demonstrations.
html {
font-family: sans-serif;
}
/* zoomBox */
.zoomBox {
position: relative;
width: 400px;
overflow: hidden;
}
.zoomBox * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.zoomBox img {
position: relative;
width: 100%;
height: auto;
z-index: -1;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.zoomBox .hover {
position: absolute;
width: 33.333333%;
height: 33.333333%;
}
.zoomBox .hover.TL {
top: 0;
left: 0;
}
.zoomBox .hover.TL:hover ~ img {
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.zoomBox .hover.TC {
top: 0;
left: 33.333333%;
}
.zoomBox .hover.TC:hover ~ img {
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transform-origin: top center;
-ms-transform-origin: top center;
transform-origin: top center;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.zoomBox .hover.TR {
top: 0;
right: 0;
}
.zoomBox .hover.TR:hover ~ img {
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
transform-origin: top right;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.zoomBox .hover.CL {
top: 33.333333%;
left: 0;
}
.zoomBox .hover.CL:hover ~ img {
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transform-origin: center left;
-ms-transform-origin: center left;
transform-origin: center left;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.zoomBox .hover.CC {
top: 33.333333%;
left: 33.333333%;
}
.zoomBox .hover.CC:hover ~ img {
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.zoomBox .hover.CR {
top: 33.333333%;
right: 0;
}
.zoomBox .hover.CR:hover ~ img {
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transform-origin: center right;
-ms-transform-origin: center right;
transform-origin: center right;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.zoomBox .hover.BL {
bottom: 0;
left: 0;
}
.zoomBox .hover.BL:hover ~ img {
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.zoomBox .hover.BC {
bottom: 0;
left: 33.333333%;
}
.zoomBox .hover.BC:hover ~ img {
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transform-origin: bottom center;
-ms-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.zoomBox .hover.BR {
bottom: 0;
right: 0;
}
.zoomBox .hover.BR:hover ~ img {
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transform-origin: bottom right;
-ms-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
/* imageLouping */
.imageLoupingBox {
--imageWidth: 400px;
--aspectRatio: 0.625;
--imageHeight: calc( var(--imageWidth) * var(--aspectRatio) );
--hoverWidth: calc( var(--imageWidth) * 0.33333334);
--hoverHeight: calc( var(--imageHeight) * 0.33333334);
position: relative;
}
.imageLoupingBox * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.imageLoupingBox img.imageLoupe {
position: relative;
width: var(--imageWidth);
height: var(--imageHeight);
z-index: -1;
}
.imageLoupingBox .loupeBox {
position: relative;
width: var(--imageWidth);
height: var(--imageHeight);
overflow: hidden;
border: 1px solid green;
}
.imageLoupingBox .loupeBox img {
width: 100%;
height: auto;
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
opacity: 0;
-webkit-transition: all 0.1s;
-o-transition: all 0.1s;
transition: all 0.1s;
}
.imageLoupingBox .loupeBox:after {
content: "CSS LOUPE";
display: block;
width: 100%;
height: 12px;
text-align: center;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
z-index: -2;
font-family: sans-serif;
opacity: 1;
-webkit-transition: all 0.05s;
-o-transition: all 0.05s;
transition: all 0.05s;
}
.imageLoupingBox .hover {
position: absolute;
width: var(--hoverWidth);
height: var(--hoverHeight);
}
.imageLoupingBox .hover:hover ~ .loupeBox:after {
opacity: 0;
-webkit-transition: all 0.05s;
-o-transition: all 0.05s;
transition: all 0.05s;
}
.imageLoupingBox .hover:hover ~ .loupeBox img {
opacity: 1;
-webkit-transition: all 0.1s;
-o-transition: all 0.1s;
transition: all 0.1s;
}
.imageLoupingBox .hover.TL {
top: 0;
left: 0;
}
.imageLoupingBox .hover.TL:hover ~ .loupeBox img {
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.imageLoupingBox .hover.TC {
top: 0;
left: var(--hoverWidth);
}
.imageLoupingBox .hover.TC:hover ~ .loupeBox img {
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transform-origin: top center;
-ms-transform-origin: top center;
transform-origin: top center;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.imageLoupingBox .hover.TR {
top: 0;
left: calc( var(--hoverWidth) * 2 );
}
.imageLoupingBox .hover.TR:hover ~ .loupeBox img {
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
transform-origin: top right;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.imageLoupingBox .hover.CL {
top: var(--hoverHeight);
left: 0;
}
.imageLoupingBox .hover.CL:hover ~ .loupeBox img {
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transform-origin: center left;
-ms-transform-origin: center left;
transform-origin: center left;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.imageLoupingBox .hover.CC {
top: var(--hoverHeight);
left: var(--hoverWidth);
}
.imageLoupingBox .hover.CC:hover ~ .loupeBox img {
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.imageLoupingBox .hover.CR {
top: var(--hoverHeight);
left: calc( var(--hoverWidth) * 2 );
}
.imageLoupingBox .hover.CR:hover ~ .loupeBox img {
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transform-origin: center right;
-ms-transform-origin: center right;
transform-origin: center right;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.imageLoupingBox .hover.BL {
top: calc( var(--hoverHeight) * 2);
left: 0;
}
.imageLoupingBox .hover.BL:hover ~ .loupeBox img {
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.imageLoupingBox .hover.BC {
top: calc( var(--hoverHeight) * 2);
left: var(--hoverWidth);
}
.imageLoupingBox .hover.BC:hover ~ .loupeBox img {
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transform-origin: bottom center;
-ms-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.imageLoupingBox .hover.BR {
top: calc( var(--hoverHeight) * 2);
left: calc( var(--hoverWidth) * 2 );
}
.imageLoupingBox .hover.BR:hover ~ .loupeBox img {
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transform-origin: bottom right;
-ms-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
<h1>ZOOMING EFFECTS vanillaCSS</h1>
<h2>Zoom box: enlarge image itself</h2>
<div class="zoomBox">
<div class="hover TL"></div>
<div class="hover TC"></div>
<div class="hover TR"></div>
<div class="hover CL"></div>
<div class="hover CC"></div>
<div class="hover CR"></div>
<div class="hover BL"></div>
<div class="hover BC"></div>
<div class="hover BR"></div>
<img src="https://source.unsplash.com/qpemSW6_1Z0">
</div>
<hr>
<h2>Image with a cssLOUPE</h2>
<div class="imageLoupingBox">
<div class="hover TL"></div>
<div class="hover TC"></div>
<div class="hover TR"></div>
<div class="hover CL"></div>
<div class="hover CC"></div>
<div class="hover CR"></div>
<div class="hover BL"></div>
<div class="hover BC"></div>
<div class="hover BR"></div>
<img class="imageLoupe" src="https://source.unsplash.com/qpemSW6_1Z0">
<div class="loupeBox">
<!--<img src="images/demoImage.jpg">-->
<img src="https://source.unsplash.com/qpemSW6_1Z0">
</div>
</div>
Because the zoom responds to a touch or mouse event and uses its position this is not possible without JS, you can however just enlarge the image on hover, also works on mobile.
img.zoomer {
transition: transform 0.3s;
}
img.zoomer:hover {
transform: scale(1.5);
}
/* css below is irrelevant */
body {
margin: 0;
}
.center {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
<div class="center">
<img class="zoomer" src="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png" width="300">
</div>
In order to be able to zoom on hover with an image inserted with <img> without javascript try this.
#imageZoom{
overflow:hidden;
transition: all 1s;
width:200px;
height:200px;
}
#imageZoom img:hover{
transform: scale(1.2);
}
<div id="imageZoom">
<img src="http://duncanlock.net/images/posts/better-figures-images-plugin-for-pelican/dummy-200x200.png">
</div>
Yes, you can get the detail image to show when you hover on the main image. Here's an example:
.main, .detail {
width: 200px;
height: 200px;
}
.main {
background-color: green;
}
img.detail {
display: none;
background-color: brown;
position: absolute;
top: 0;
left: 0;
}
div.container:hover img.detail {
display: block;
}
.container {
width: auto;
height: auto;
}
<div class="container">
<img class="main" src=""/>
<img class="detail" src=""/>
</div>
If you want several bits to have detail then you could have several divs which are positioned at the right places (in terms of % distance left and right of the main image) and when the user hovers over one show its related detail.
Requirement is to put transition effect on redeem now button. Initially redeem now button is hidden, on hover it will display the redeem now button with transition
Problem is I have added display: none for redeem now button and on hover its showing display: block.
Below is my code
.wpf-demo-3 {
background-color: #FFF;
display: block;
width: 265px;
height: 300px;
overflow: hidden;
position: relative;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.wpf-demo-3:hover .view-caption {
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
position: absolute;
left: 0px;
right: 0px;
bottom: -287px;
display: block;
height: 270px;
text-align: center;
border-top: 2px none #0066b3;
border-right-width: 0px;
background-color: hsla(0, 0%, 100%, .3);
box-shadow: 0 -1px 8px 0 rgba(0, 0, 0, .16);
transition: all 0.5s;
transition-duration : 0.3s;
display: block !important;
}
.wpf-demo-3 .view-caption {
background-color: #FFF;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
padding: 10px;
height: 15%;
display: none !important;
}
<div class="col-xs-12 col-sm-3 col-md-3 text-center item-spacing" style=" margin: 0px; padding: 0px;" >
<div class="item hot-deals-wrapper clearfix item-spacingies " style="height: 300px;">
<div class="wpf-demo-3">
<h5> <strong><a style="color:#000;text-decoration:none" data-bind="text:name,attr:{href:redirectLink}"></a></strong> </h5>
<div data-bind="ifnot: mediumImage">
<div class="img-wrapper"> <a data-bind="attr:{href:redirectLink}"><img src="https://d2kbtrec8muwrn.cloudfront.net/assets/web/fnp/fnp/basket/B28.jpg"/></a> </div>
</div>
<div> <i class="fa fa-share-alt share-icon socialicons"></i>
<div style="display:none" class="alert_list"> </div>
</div>
<a href = "https://www.google.co.in/" class = "view-caption">
<button class="btn btn-default pb-bg-red bottommarginmore redeemNowBtn " style=" width: 128px; margin-top: 25px;">Redeem Now</button>
</a> </div>
</div>
</div>
You can try this instead of dispaly property
CSS CODE:
.wpf-demo-3:hover .view-caption {
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
position: absolute;
left: 0px;
right: 0px;
bottom: -287px;
display: block;
height: 270px;
text-align:center;
border-top: 2px none #0066b3;
border-right-width: 0px;
background-color: hsla(0, 0%, 100%, .3);
box-shadow: 0 -1px 8px 0 rgba(0, 0, 0, .16);
transition: all 0.5s;
transition-duration : 0.3s;
opacity: 1;
visibility: visible;
}
.wpf-demo-3 .view-caption {
background-color: #FFF;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
padding: 10px;
height: 15%;
opacity: 0;
visibility: hidden;
}
DEMO:
https://jsfiddle.net/JentiDabhi/k5c6net2/
When switching from a display:none to a display:block with CSS transitions, try using a Javascript setTimeout with a small delay as an intermediary. The transitions can't apply to a display:none situation.
To do this you'd need to use a hover event, rather than a hover CSS selector.
In CSS, try changing .wpf-demo-3:hover .view-caption to just .view-caption.transition. Also, remove the display: block; and display:block !important; declarations.
Also, remove the display: none !important; from the .wpf-demo-3 .view-caption declaration.
Then in Javascript try something like (using jQuery syntax for example simplicity):
$('.wpf-demo-3').hover(function(){
$('.view-caption').show();
setTimeout(function(){
$('.view-caption').addClass('transition');
}, 10);
}, function(){
$('.view-caption').removeClass('transition');
setTimeout(function(){
$('.view-caption').hide();
}, 510);
});
The setTimeout in the last hover function is set to 510ms so that it is 10ms after the CSS transition timing of 0.5s.
I am trying to create a splash screen for my website and I have made a progress bar to make it look nicer. I also have some links for the user to login or register.
What I want to achieve is, right after the window loads, have the progress bar do its thing for 4 seconds then have it fade out in .5 seconds and then have the links fade in in its place in .5s for a total of 5 seconds before the user can proceed.
I have put together some code to make this work using mainly:
setTimeout();
but despite having no errors as far as both I and the Google Chrome console can tell, no visible result is produced.
How can I fix my code to work properly? Any suggestions would be greatly appreciated. I would prefer a solution in plain JavaScript, but if there's no other way, I would be satisfied with a jQuery one too.
To help you, I have assembled a demo for you here.
No doubt to switch to jquery. FadeIn and fadeOut do it easily:
$(window).load(function(){
var t=setTimeout(function(){
$("#progressbar").fadeOut(500);
$("#splashscreen-links").fadeIn(500);
},4000)
})
#-webkit-keyframes greenglow {
from {
left:-120px;
}
to {
left:100%;
}
}
#-moz-keyframes greenglow {
from {
left: -120px;
}
to {
left: 100%;
}
}
#-ms-keyframes greenglow {
from {
left: -120px;
}
to {
left: 100%;
}
}
#-o-keyframes greenglow {
from {
left: -120px;
}
to {
left: 100%;
}
}
#keyframes greenglow {
from {
left: -120px;
}
to {
left: 100%;
}
}
#progressbar {
/* Dimensions */
width: 250px;
height: 16px;
overflow: hidden;
/* Positioning */
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin: 5px;
padding-top: 4px;
padding-left: 17px;
/* Styling */
background: #E6E6E6;
border:1px solid #bbb;
border-radius:0px;
}
#progressbar:after {
content: " ";
display: block;
width: 120px;
top: -50%;
height: 250%;
position: absolute;
animation: greenglow 2s linear infinite;
-webkit-animation: greenglow 2s linear infinite;
z-index: 2;
background: #1CAE30;
}
#splashscreen-links {
/* Text */
color: #999999;
font-family: "Arial";
text-decoration: none;
/* Positioning */
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin: 5px;
padding-top: 4px;
padding-left: 17px;
/* Visibility */
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="progressbar"></div>
<p id = "splashscreen-links"><a>Login</a> • <a>Register</a></p>
You are already using CSS animations. Just keep going down that path!
#keyframes progresshide {
0% {opacity: 1; display:block; }
80% { opacity: 1; }
100% { opacity: 0; display:none; }
}
#keyframes linksshow {
0% {opacity: 0; }
80% { opacity: 0; }
100% { opacity: 1; }
}
#progressbar {
animation: progresshide 5s linear forwards;
}
#splashscreen-links {
animation: linksshow 5s linear forwards;
}
https://jsfiddle.net/bcwtz8rr/3/
In the case that you'd rather go JS than JQuery, it is still possible using .className to switch the class, setting up classes with transitions of the .5s you mentioned, and using setTimeout appropriately.
First, we start by introducing another two rather simple classes:
.showObject {
transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
opacity: 1;
}
.hideObject {
transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
opacity: 0;
}
Then, JS with appropriate setTimeout usage:
window.onload = function SwitchProgress() {
// Declaration
'use strict';
// Fade in
document.getElementById('progressbar').setAttribute('style', 'display: block;');
document.getElementById('progressbar').className = 'showObject';
// Waiting 4s for bar animation, then fading it out
setTimeout(function () {
document.getElementById('progressbar').className = 'HideObject';
// .5s while the bar fades out, removing bar, displaying links
setTimeout(function () {
document.getElementById('progressbar').setAttribute('style', 'display: none;');
document.getElementById('splashscreen-links').setAttribute('style', 'display: block;');
// .01s for display change, links fade in
setTimeout(function () {
document.getElementById('splashscreen-links').className = 'showObject';
}, 10);
}, 990);
}, 4000);
};
Just wanted to note: I got this to work on Codecademy (codebits), which refreshes the file every time you make a change. JSFiddle didn't work as well. Should be fine for usage on a page that's actually going to experience proper onload execution.
I am working on a slideout nav screen. I got the horizontal slide out menu to work perfectly without media queries, but when I tried to add my slide out navigation menu to my normal navigation menu, I cannot get the three line hamburger menu image to display when in a media screen on max-width: 640px;. I hide the nav-btn (menu image) when the normal navigation menu is displaying, but I want the nav-btn to display when I get to the smaller screen size to allow me to open the menu.
Does anyone see why my nav-btn will not display within my media query?
//open the lateral panel
$('.nav-btn').on('click', function(event){
event.preventDefault();
$('.nav-panel').addClass('is-visible');
});
//clode the lateral panel
$('.nav-panel').on('click', function(event){
if( $(event.target).is('.nav-panel') || $(event.target).is('.nav-panel-close') ) {
$('.nav-panel').removeClass('is-visible');
event.preventDefault();
}
});
.nav_list {
text-decoration: none;
background-color: #F0F0F0;
margin: 0;
list-style: none;
text-align: right;
width: 100%;
padding: 0;
}
.nav_list > a {
display: inline-block;
padding: 25px 15px;
text-decoration: none;
}
.nav_list > a > li {
text-decoration: none;
font-size: 1.2em;
color: #45a5ba;
}
.nav_list > a:hover {
color: #FFF;
background-color: #CCC;
}
.nav-btn {
display: none;
}
/*.nav-panel {
display: none;
}*/
#media screen and (max-width:640px) {
.header {
display: none;
}
.nav-panel {
display: block;
}
.nav_list {
text-decoration: none;
background-color: #F0F0F0;
margin: 0;
list-style: none;
text-align: right;
width: 100%;
padding: 0;
}
.nav_list > a {
display: block;
padding: 15px 15px;
text-decoration: none;
/*border-bottom: 1px solid #FFF;*/
}
.nav_list > a > li {
text-decoration: none;
font-size: 1.2em;
color: #45a5ba;
}
.nav_list > a:hover {
color: #FFF;
background-color: #CCC;
}
.nav-btn {
position: absolute;
display: block;
right: 2%;
top: 3%;
}
.nav-panel {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
visibility: hidden;
-webkit-transition: visibility 1s;
-moz-transition: visibility 1s;
transition: visibility 1s;
}
.nav-panel::after {
/* overlay layer */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
-webkit-transition: background 0.8s 0.8s;
-moz-transition: background 0.8s 0.8s;
transition: background 0.8s 0.8s;
}
.nav-panel.is-visible {
visibility: visible;
-webkit-transition: visibility 0s 0s;
-moz-transition: visibility 0s 0s;
transition: visibility 0s 0s;
}
.nav-panel.is-visible::after {
background: rgba(0, 0, 0, 0.6);
-webkit-transition: background 0.3s 0s;
-moz-transition: background 0.3s 0s;
transition: background 0.3s 0s;
}
.nav-panel.is-visible .nav-panel-close::before {
-webkit-animation: cd-close-1 0.6s 0.3s;
-moz-animation: cd-close-1 0.6s 0.3s;
animation: cd-close-1 0.6s 0.3s;
}
.nav-panel.is-visible .nav-panel-close::after {
-webkit-animation: cd-close-2 0.6s 0.3s;
-moz-animation: cd-close-2 0.6s 0.3s;
animation: cd-close-2 0.6s 0.3s;
}
#-webkit-keyframes cd-close-1 {
0%, 50% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(45deg);
}
}
#-moz-keyframes cd-close-1 {
0%, 50% {
-moz-transform: rotate(0);
}
100% {
-moz-transform: rotate(45deg);
}
}
#keyframes cd-close-1 {
0%, 50% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
}
#-webkit-keyframes cd-close-2 {
0%, 50% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(-45deg);
}
}
#-moz-keyframes cd-close-2 {
0%, 50% {
-moz-transform: rotate(0);
}
100% {
-moz-transform: rotate(-45deg);
}
}
#keyframes cd-close-2 {
0%, 50% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
.nav-panel-header {
position: fixed;
width: 70%;
height: 50px;
line-height: 50px;
background: rgba(255, 255, 255, 0.96);
z-index: 2;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
-webkit-transition: top 0.3s 0s;
-moz-transition: top 0.3s 0s;
transition: top 0.3s 0s;
}
#nav-slide-title {
font-weight: bold;
color: #45a5ba;
padding-left: 5%;
}
.from-right .nav-panel-header, .from-left .nav-panel-header {
top: -50px;
}
.from-right .nav-panel-header {
right: 0;
}
.from-left .nav-panel-header {
left: 0;
}
.is-visible .nav-panel-header {
top: 0;
-webkit-transition: top 0.3s 0.3s;
-moz-transition: top 0.3s 0.3s;
transition: top 0.3s 0.3s;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header class="header">
<div class="header_wrap">
<div class="logo">Optimum Designs</div>
<nav>
<img src="http://optimumwebdesigns.com/icons/mobile_menu_bttn.png" style="height: 28px; width: 28px;">
<!-- <span class="nav-btn"></span> -->
<ul class="nav_list">
<li>Home</li>
<li>Work</li>
<li>Approach</li>
<li>Company</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<main class="cd-main-content">
<h1>Slide In Panel</h1>
</main>
<div class="nav-panel from-right">
<header class="nav-panel-header">
<div id="nav-slide-title">Menu</div>
Close
</header>
<div class="nav-panel-container">
<div class="nav-panel-content">
<ul class="nav_list">
<li>Home</li>
<li>Work</li>
<li>Approach</li>
<li>Company</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div> <!-- nav-panel-content -->
</div> <!-- nav-panel-container -->
</div> <!-- nav-panel -->
I figured it out. I had the nav-btn within my header div. I was doing this .header {display: none;} which was not allowing my button to show within my media query.
For those that looked, thanks.