I need to implement fade effect with climb text on my web page.
Example: http://www.believein.co.uk/
In this example on the main page we see when we hover mouse over image then image fade and text climb from the top. All what I imagine is that:
<div class="row pageTitle2">
<div class="col-md-12">
<div class="row">
<div class="col-md-4 marPadReset">
<img src="~/Content/Images/4.jpg"/>
</div>
</div>
</div>
$(".pageTitle2 img").fadeTo("slow", 1.0);
$(".pageTitle2 img").hover(function () {
$(this).fadeTo("slow", 0.6);
}, function () {
$(this).fadeTo("slow", 1.0);
});
Does anybody help?
You can use CSS3 transitions for this, on hover you need to affect the opacity of the overlay background and the margin of the overlay text.
For example:
div#overlay_container:hover div#background {
transition: opacity 1s ease-in-out;
opacity: 0.6;
}
The above on hover of the overlay will change the opacity to 0.6 in an "eased" fashion.
div#overlay_container:hover div#text {
transition: margin-top 2s ease-in-out, opacity 2s ease-in-out;
opacity: 1;
margin-top: 0px;
}
The above on hover of the overlay will change the opacity to 1 and the margin-top to 0.
You can see the JSFiddle here.
You may need to fall back to a Javascript based solution if you wish to cater for outdated browsers.
You could use jQuery with some mouseenter and mouseleave effects
$(function(){
$(".bg").mouseenter(function(){
$(".text").fadeIn(500);
});
$(".bg").mouseleave(function(){
$(".text").slideUp(500);
});
});
JSFIDDLE
Link: http://jsfiddle.net/FCpc8/1/
CSS
a { position: relative; display: inline-block }
a span {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
background: black;
color: #fff;
opacity:0;
transition:1s;
}
a:hover span {
opacity:1;
}
HTML
<div class="row pageTitle2">
<div class="col-md-12">
<div class="row">
<div class="col-md-4 marPadReset">
<a href="#">
<span>Some Text</span>
<img src="~/Content/Images/4.jpg"/></a>
</div>
</div>
</div>
Explanation
First of all, you need to wrap the image in anchor tag and include the text you want to show on hover in a span tag. By default, the opacity of text will be 0, that is hidden. On hover (a:hover span) opacity is set to 1 - visible. and background is black hence the image behind is not visible. Transition property of css will help it move the effect smoothly.
Related
I'm trying to use the same button to open and close a menu, I'm sure this is super simple but I'm new to the world of jQuery. I'm using the Wordpress builder 'Oxygen' if that helps. Here's my code:
The modal is an in-built feature in the website builder so I can't provide much code on that. It's basically set to trigger when element with class "open" is clicked, and close with element class "oxy-modal-close".
jQuery
jQuery("#toggle").click(function () {
jQuery('#plus').toggleClass('rotate');
jQuery('#toggle').toggleClass('open oxy-modal-close');
});
HTML
<div id="toggle" class="open">
<img id="plus" src="http://hausse.co.uk/wp-content/uploads/2021/01/plus.svg"/>
</div>
CSS
#plus {
-moz-transition: transform 1s;
-webkit-transition: transform 1s;
transition: transform 0.3s;
width: 35px;
position: fixed;
top: 20px;
right: 20px;
}
.rotate {
transform: rotate(45deg);
}
Basically on the 2nd click, the class is re-adding the class "open", which is causing the menu to flicker as the two actions are conflicting with each other. Video here - https://gph.is/g/ZnNQddo
I have tried adding a delay to the class "open", but for some reason the delay is only working on the first click - on the second it's changing class instantly. This is the code I'm trying for that.
jQuery("#toggle").click(function () {
jQuery('#plus').toggleClass('rotate');
jQuery('#toggle').toggleClass('oxy-modal-close');
var el = jQuery("#toggle");
window.setTimeout(function() {
el.toggleClass('open');
}, 500);
});
You are referencing the id again within the click - you need to reference $(this)... to toggle the class on the click
Also - you need to start with one of the states - that way it can toggle the class to the other state on each click as per the snippet (the cross icon is on the right of the snippet widow as per styling ) - now when you click it rotates as intended.
$("#toggle").click(function() {
$('#plus').toggleClass('rotate');
$(this).toggleClass('open oxy-modal-close');
});
#plus {
-moz-transition: transform 1s;
-webkit-transition: transform 1s;
transition: transform 0.3s;
width: 35px;
position: fixed;
top: 20px;
right: 20px;
}
.rotate {
transform: rotate(45deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="toggle" class="open">
<img id="plus" src="http://hausse.co.uk/wp-content/uploads/2021/01/plus.svg"/>
</div>
Here's an example of what I am trying to recreate: https://www.hioscar.com/get-quote/
When a user has finished entering information into the input area or selected an option the current line will animate (using translate & opacity, I believe) and the next line will come into view.
I've started something very basic just to get a feel for how it's meant to work using on hover but I'm not sure on how to complete replicate this animation in my own form.
div {
margin-top: 500px;
}
div:hover {
transform: translate(0px, -300px);
opacity: 0.3;
transition: opacity 0.05s linear;
}
<div>
<p>Hello, I am a very basic example</p>
</div>
So you had several problems, you were only animating opacity and if you move the div from under the mouse cursor when you hover it, it won't work.
So I activated all transitions, not just opacity, made the div as tall as the browser, and used the div's internal padding.
body, html {
/* needed so that the div can also be 100% of window */
height: 100%;
}
div {
height: 100%;
padding-top: 500px;
}
div:hover {
padding-top: 300px;
transition: all 0.05s linear;
}
<div>
<p>Hello, I am a very basic example</p>
</div>
I have an image slider, it's going to the next/previous image fine.
The problem is that when you click the previous image button, the animation takes longer than when you click in the next image button, and the animation is the same for both!Can you tell me why is this happening?
JSFIDDLE:
http://jsfiddle.net/v6d16jza/
HTML:
<div id="slider">
<div id="setas-navegacao" style="position:absolute;height:100%;width:100%;">
<i class="sprite-slider_ant" style="z-index:1;position:absolute;left:1.7%;top:50%;color:#ffa500;font-size:15pt;"><</i>
<i class="sprite-slider_prox" style="z-index:1;position:absolute;right:68.5%;top:50%;color:#ffa500;font-size:15pt;">></i>
</div>
<div class="slide slide_ativo" style="background-image:url('http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images-540x303.jpg');">
</div>
<div class="slide" style="background-image:url('http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg');">
</div>
<div class="slide" style="background-image:url('http://7-themes.com/data_images/out/42/6914793-tropical-beach-images.jpg');">
</div>
</div>
CSS:
html{
overflow: hidden;
width:100%;
}
div#slider{
position:relative;
overflow: hidden;
width: 300%;
height:300px;
}
.slide{
position:relative;
width:33.3%;
height:100%;
float:left;
background-size: cover;
-webkit-transform: translateZ(0);
-webkit-transition: margin-left 0.9s ease-out;
-moz-transition: margin-left 0.9s ease-out;
-o-transition: margin-left 0.9s ease-out;
transition: margin-left 0.9s ease-out;
}
jQuery:
$(".sprite-slider_prox").on("click", function(){
if($(".slide_ativo").next().is(".slide")){
$(".slide_ativo").css("margin-left", "-100%").removeClass("slide_ativo").next().addClass("slide_ativo");
}
});
$(".sprite-slider_ant").on("click", function(){
if($(".slide_ativo").prev().is(".slide")){
$(".slide_ativo").removeClass("slide_ativo").prev().css("margin-left", "0%").addClass("slide_ativo");
}
});
You are adding more margin than it's actually needed to shift the image to the left.
You can see what's happening with the Chrome inspector, hovering the images while they change (raising the animation time to some higher value will help you). You will notice that the delay before the slider starts moving back is spent removing the extra margin.
I recorded a video of the debugging.
If you change:
.css("margin-left", "-100%")
to:
.css("margin-left", "-33.333%")
the animation will work correctly (see the fiddle)
Also, note that I had to remove the padding and margin from html and body elements to achieve the correct shifting.
I have a row of 4 divs that are floated left. On click, the div disappears and its siblings move to the left and take up its position. However, I'm struggling with smoothing this animation since the remaining 'divs' just jump to their new position instead of sliding over
http://jsfiddle.net/G9x8V/
Is there any way to smooth out the transition, preferably without using specific values, ie: margin-left: x pixels;? Also, is it possible to do this with css transitions?
You can switch fadeOut() with hide()
Here is the updated fiddle
$(function(){
$('.box').on('click', function(){
$(this).hide(1000);
})
});
EDIT
One of the directions is to wrap boxes into invisible divs that will hide after the boxes fade out. Here is the updated fidle
HTML
<div class="container">
<div class="outer-box">
<div class="box">1</div>
</div>
<div class="outer-box">
<div class="box">2</div>
</div>
<div class="outer-box">
<div class="box">3</div>
</div>
<div class="outer-box">
<div class="box">4</div>
</div>
</div>
CSS
.container {
width: 600px;
}
.box {
width: 100%;
height: 120px;
background: red;
float: left;
}
.outer-box {
width: 20%;
height: 120px;
margin-left: 2.5%;
float: left;
}
jQuery
$(function(){
$('.box').on('click', function(){
$(this).fadeOut(1000, function(){
$(this).parents('.outer-box').hide(1000);
});
});
});
I'd go with Bojana's answer, but I'll give you another option, as I worked a little on it(it's not done, implementation isn't as easy as bojana's):
http://jsfiddle.net/G9x8V/4/
#-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {margin-left: 18%;}
25% {margin-left: 12%;}
50% {margin-left: 6%;}
100% {margin-left: 0%;}
}
And then you'd have to update the javascript so it occured on click, not on page load, and you might want to put in more points on that animation and switch to px.
Is this what you are looking for? Or do you actually want the blocks to slide along?
CSS3 Ease
-webkit-transition: all 3s ease-in-out;
-moz-transition: all 3s ease-in-out;
-ms-transition: all 3s ease-in-out;
-o-transition: all 3s ease-in-out;
JSFIDDLE
jQuery
$(function(){
$('.box').on('click', function(){
$(this).fadeOut(function() {
$(this).next().animate({'left': '0px'}, 1000).next().animate({'left': '27.5%'}, 1000).next().animate({'left': '50%'}, 1000);
});
})
});
JSFIDDLE jQuery
I am trying to create some jquery styled hover fade in/out thumbnails. I've managed to do the hover in and out on the images but theres a problem. As the user hovers over, I want some text to appear, which I have achieved with CSS, the problem is, when the user hovers over the text the image fades back in. I was wondering how I could make it so the image continues to stay faded out whilst also hovering over the text. I do not want the text to become faded either, I have tried simply switching to the thumb class in the script section.
<script>
$(document).ready(function(){
$(".thumb img").fadeTo("fast", 1.0); // This sets the opacity of the thumbs to fade down to 60% when the page loads
$(".thumb img").hover(function(){
$(this).fadeTo("fast", 0.3); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("fast", 1.0); // This should set the opacity back to 60% on mouseout
});
});
</script>
HTML
<div class="thumb">
<img src="images/hooty_thumb.png" width="250" height="224"/>
<div class="title">
<h1 class="din">TITLE HERE</h1>
<h2>Branding, Print, Web</h2>
<h2>2011</h2></div></div>
CSS:
.thumb {float: left; background-color: #FFF; z-index: 1; width: 250px; height: 225px; margin-right: 27px; margin-bottom: 45px; display: inline-block; *display:inline; *zoom: 1; position: relative;}
.thumb .title{position:absolute; width: 250px; top: 40%; left:0%; text-align: center; display: none; z-index: -1;}
.thumb:hover .title{display: inline; z-index: 1;}
.thumb .title h1{color:#00F;}
Here you go, You needed to go up one level and attach the rollover events to the parent then traverse the DOM to the image and set its opacity. *Side Note $(document).ready(function(){ }) is same as $(function(){ })
$(function(){
$(".thumb img").fadeTo("fast", 1.0);
$(".thumb").bind({
mouseenter:function(){
$('img', this).fadeTo("fast", 0.3);
},mouseleave: function(){
$('img', this).fadeTo("fast", 1.0);
}
});
});
With the same HTML and CSS, I adjusts you event bind from thumb img to thumb to ensure the event happens on the whole image block. With in the event callback, I used a jQuery context selector to detect the img element and perform fade-in / fade-out effect on it.
The effect could be seen here. http://jsfiddle.net/yangchenyun/5pnQA/
$(document).ready(function() {
$(".thumb img").fadeTo("fast", 1.0); // This sets the opacity of the thumbs to fade down to 60% when the page loads
$(".thumb").hover(function() {
$('img', this).fadeTo("fast", 0.3); // This should set the opacity to 100% on hover
}, function() {
$('img', this).fadeTo("fast", 1.0); // This should set the opacity back to 60% on mouseout
});
});
You can acheive this with Html and CSS only, your page will be more efficient.
Html5
<a href="#" class="thumb">
<img src="images/hooty_thumb.png" width="250" height="224"/>
<strong>TITLE HERE</strong>
<em>Branding, Print, Web</em>
<time>2011</time>
</a>
CSS
a.thumb{float:left; position:relative; background:#FFF; z-index:1; width:250px; height:225px; text-decoration:none; margin:0 27px 45px;}
a.thumb img{opacity:0.6; -webkit-transition:opacity 0.2s linear; -moz-transition:opacity 0.2s linear;}
a.thumb:hover img{opacity:1;}
a.thumb>strong, .thumb>em, .thumb>time{opacity:0; -webkit-transition:opacity 0.2s linear; -moz-transition:opacity 0.2s linear;}
a.thumb:hover>strong, .thumb:hover>em, .thumb:hover>time{opacity:1;}