Trying to add an animation to the show / hide made with CSS. But not sure if possible, maybe I should do this with JS instead?
The paragraph is shown when hovering the div, but this does not have a smooth animation like I would want it to. Was primary looking for it to drop down or something.
However, the basic works. Would be glad if you took a look and decided if it should be made with JS instead. And incase how.
HTML
<div class="hover-to-show-link">
<a href="#">
<img src="#">
<h2>Logo</h2>
<p class="hover-to-show">text</p>
</a>
</div>
<div class="hover-to-show-link">
<a href="#">
<img src="#">
<h2>Profilering</h2>
<p class="hover-to-show">text</p>
</a>
</div>
<div class="hover-to-show-link">
<a href="#">
<img src="#">
<h2 >Profilering</h2>
<p class="hover-to-show">text</p>
</a>
</div>
<div class="hover-to-show-link">
<a href="#">
<img src="#">
<h2>Profilering</h2>
<p class="hover-to-show">text</p>
</a>
</div>
CSS
.hover-to-show {
display: none;
transition: all .2s ease-in-out;
}
.hover-to-show-link:hover .hover-to-show {
display:block;
transition: all .2s ease-in-out;
}
As #Paran0a said, display property cannot be animated, you can animate height or opacity for instead to make the transition works.
.hover-to-show {
opacity: 0;
transition: all .2s ease-in-out;
}
.hover-to-show-link:hover .hover-to-show {
opacity: 1;
transition: all .2s ease-in-out;
}
<div class="hover-to-show-link">
<a href="#">
<h2>Logo</h2>
<p class="hover-to-show">text</p>
</a>
</div>
<div class="hover-to-show-link">
<a href="#">
<h2>Profilering</h2>
<p class="hover-to-show">text</p>
</a>
</div>
<div class="hover-to-show-link">
<a href="#">
<h2 >Profilering</h2>
<p class="hover-to-show">text</p>
</a>
</div>
<div class="hover-to-show-link">
<a href="#">
<h2>Profilering</h2>
<p class="hover-to-show">text</p>
</a>
</div>
As mentioned before, Display cannot be animated.
I would use a combination of visibility and opacity to get the wanted result:
.hover-to-show
{
visibility:hidden;
opacity:0;
transition:opacity 0.5s linear;
}
.hover-to-show-link:hover .hover-to-show
{
display:block;
visibility:visible;
opacity:1;
}
For a more thorough explanation
Try this:
.hover-to-show {
visibility: hidden;
height: 0;
width: 0;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
}
.hover-to-show-link:hover .hover-to-show {
visibility: visible;
height: auto;
width: auto;
opacity: 1;
}
You can animate using purely CSS· with Keyframes, although I recommend using jQuery and slideUp / slideDown
.hover-to-show span {
opacity: 0;
position: absolute;
line-height: 20px;
transition: all .2s ease-in-out;
}
.hover-to-show {
position: relative;
display: block;
height: 0;
}
.hover-to-show-link:hover .hover-to-show span{
-webkit-animation: show 2s forwards; /* Safari 4+ */
-moz-animation: show 2s forwards; /* Fx 5+ */
-o-animation: show 2s forwards; /* Opera 12+ */
animation: show 2s forwards; /* IE 10+, Fx 29+ */
}
.hover-to-show-link:hover .hover-to-show {
-webkit-animation: grow 2s forwards; /* Safari 4+ */
-moz-animation: grow 2s forwards; /* Fx 5+ */
-o-animation: grow 2s forwards; /* Opera 12+ */
animation: grow 2s forwards; /* IE 10+, Fx 29+ */
}
#-webkit-keyframes show {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-moz-keyframes show {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-o-keyframes show {
0% { opacity: 0; }
100% { opacity: 1; }
}
#keyframes show {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-webkit-keyframes grow {
0% { height: 0; }
100% { height: 20px; }
}
#-moz-keyframes grow {
0% { height: 0; }
100% { height: 20px; }
}
#-o-keyframes grow {
0% { height: 0; }
100% { height: 20px; }
}
#keyframes grow {
0% { height: 0; }
100% { height: 20px; }
}
<div class="hover-to-show-link">
<a href="#">
<img src="http://dummyimage.com/100x4:3">
<h2>Logo</h2>
<p class="hover-to-show"><span>text</span></p>
</a>
</div>
<div class="hover-to-show-link">
<a href="#">
<img src="http://dummyimage.com/100x4:3">
<h2>Profilering</h2>
<p class="hover-to-show"><span>text</span></p>
</a>
</div>
<div class="hover-to-show-link">
<a href="#">
<img src="http://dummyimage.com/100x4:3">
<h2 >Profilering</h2>
<p class="hover-to-show"><span>text</span></p>
</a>
</div>
<div class="hover-to-show-link">
<a href="#">
<img src="http://dummyimage.com/100x4:3">
<h2>Profilering</h2>
<p class="hover-to-show"><span>text</span></p>
</a>
</div>
You can use Animate.css.
Usage
<head>
<link rel="stylesheet" href="animate.min.css">
</head>
<p class="hover-to-show animated infinite bounce">text</p>
If you don't care much about browsers compatibility, you can use CSS3 transition property. Can I use CSS3 Transitions? But display property can't be animated, you can use opacity instead.
.hover-to-show {
opacity: 0;
transition: all .2s ease-in-out;
}
.hover-to-show-link:hover .hover-to-show {
opacity: 1;
transition: all .2s ease-in-out;
}
If you have to take care of old browsers, like IE, you can use jQuery instead.
$('.hover-to-show-link').mouseover(function() {
this.find('.hover-to-show').fadeIn(200);
}).mouseleave(function() {
this.find('.hover-to-show').fadeOut(200);
});
This is a great question! jQuery offers some great tools for this such as .slideDown() and .slideUp(), however this of course requires the use of jQuery.
If you would like to use CSS, I would suggest animating the max-height property; just make sure to keep the value it grows to greater than the content of your paragraphs.
.hover-to-show {
overflow: hidden;
max-height: 0px;
-o-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.hover-to-show-link:hover .hover-to-show {
max-height: 50px;
}
<div class="hover-to-show-link">
<a href="#">
<img src="#">
<h2>Logo</h2>
<p class="hover-to-show">text</p>
</a>
</div>
<div class="hover-to-show-link">
<a href="#">
<img src="#">
<h2>Profilering</h2>
<p class="hover-to-show">text</p>
</a>
</div>
<div class="hover-to-show-link">
<a href="#">
<img src="#">
<h2>Profilering</h2>
<p class="hover-to-show">text</p>
</a>
</div>
<div class="hover-to-show-link">
<a href="#">
<img src="#">
<h2>Profilering</h2>
<p class="hover-to-show">text</p>
</a>
</div>
Related
I have CSS placeholders/skeleton animations and some content in PHP and HTML. I want to show these placeholders when the page is initially opened (even before it finishes loading) and hide them when the page is fully loaded to show the content to show the content.
My html content include carousels and cards that hold data from the database.
.placeholder {
display: inline-block;
min-height: 1em;
vertical-align: middle;
cursor: wait;
background-color: currentColor;
opacity: .5;
border-radius: 50px;
}
.placeholder.btn::before {
display: inline-block;
content: ""
}
.placeholder-xs {
min-height: .6em
}
.placeholder-sm {
min-height: .8em
}
.placeholder-lg {
min-height: 1.2em
}
.placeholder-xl {
min-height: 6rem;
border-radius: 6px !important;
}
.placeholder-ml {
min-height: 4rem;
border-radius: 6px !important;
}
.placeholder-glow .placeholder {
-webkit-animation: placeholder-glow 2s ease-in-out infinite;
animation: placeholder-glow 2s ease-in-out infinite
}
#-webkit-keyframes placeholder-glow {
50% {
opacity: .2
}
}
#keyframes placeholder-glow {
50% {
opacity: .2
}
}
.placeholder-wave {
-webkit-mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
-webkit-mask-size: 200% 100%;
mask-size: 200% 100%;
-webkit-animation: placeholder-wave 2s linear infinite;
animation: placeholder-wave 2s linear infinite
}
#-webkit-keyframes placeholder-wave {
100% {
-webkit-mask-position: -200% 0%;
mask-position: -200% 0%
}
}
#keyframes placeholder-wave {
100% {
-webkit-mask-position: -200% 0%;
mask-position: -200% 0%
}
}
<div class="header-large-title">
<h1 class="title">Hello
<?php echo htmlspecialchars($_SESSION["lastname"]); ?>
</h1>
<?php
$countfarm = mysqli_query($data, "SELECT count(farm_active) as total from farmerfruit where farm_active = '1' AND farmer_id='" . $_SESSION['id'] . "'");
$totalcount = mysqli_fetch_assoc($countfarm);
?>
<h4 class="subtitle">You have
<a href="#" class="headerButton" data-toggle="modal" data-target="#ModalBasic">
<?php echo $totalcount['total']; ?> Ongoing
</a>
Farm Activities
</h4>
</div>
<div class="section full mt-3 mb-3 main-banner">
<div class="carousel-multiple owl-carousel owl-theme">
<div class="item">
<div class="card">
<a href="#" data-toggle="modal" data-target="#ModalBasic">
<h4 class="head-card">My Farm</h4>
<img src="assets/img/sample/photo/farm/1.png" class="card-img-top" alt="image">
</a>
</div>
</div>
<div class="item">
<div class="card">
<a href="#">
<h4 class="head-card">Training</h4>
<img src="assets/img/sample/photo/farm/2.png" class="card-img-top" alt="image">
</a>
</div>
</div>
<div class="item">
<div class="card">
<a href="shop.php">
<h4 class="head-card">Our Shop</h4>
<img src="assets/img/sample/photo/farm/3.png" class="card-img-top" alt="image">
</a>
</div>
</div>
<div class="item">
<div class="card">
<a href="#">
<h4 class="head-card">Trends</h4>
<img src="assets/img/sample/photo/farm/4.png" class="card-img-top" alt="image">
</a>
</div>
</div>
</div>
</div>
Please help. Thank you
Here is a simple example. You can use window.onload to invoke a function when the page is loaded. Then you can add a class to <body> so that you will be able to change the CSS accordingly.
I just added a one second delay for the demonstration as this is a very small DOM and loads quickly.
window.onload = function(){
setTimeout(()=>{ // just for demo
document.body.classList.add('loaded');
}, 1000)
};
.container{
width:50%;
margin-bottom:10px
}
.placeholder {
animation: skeleton 1s linear infinite alternate;
}
.placeholder .content{
visibility: hidden
}
#keyframes skeleton {
0% {
background-color: hsl(200, 20%, 80%);
}
100% {
background-color: hsl(200, 20%, 95%);
}
}
body.loaded .placeholder{
animation: none
}
body.loaded .placeholder .content{
visibility: visible
}
<div class="container placeholder">
<div class="content">
I'm Loaded<br />Place holder is gone...<br />...
</div>
</div>
<div class="container placeholder">
<div class="content">I'm smaller</div>
</div>
I am having an issue with a page I am developing; it seems the CSS that is being generated by my JavaScript file is inconsistent. It seems to be only the CSS regarding the placement of a div (using calculated values) and the height of a couple other divs (also using calculated values).
This was not an issue until I deployed to the hosting service for ongoing development testing. In other words, on my local machine, the issue is not reproducible.
I have had to refresh the page as many as 40 times to get reproduce the issue, but it happens...
The inconsistent behavior is regarding the placement of the <article class="betterThings">. The placement is calculated by JS, and it seems that JS is not always calculating the $('.header').outerHeight() correctly. Again, it works most of the time, but not always. I should also specify that I have only been able to reproduce in Chrome so far.
Website here
Code here:
var navTop;
var windowHeight;
var belowHeader;
var tallestHomeDiv;
var orientation = window.orientation;
$('document').ready(function() {
navTop = $('.header').outerHeight(true);
windowHeight = $(window).height();
belowHeader = ((windowHeight - (navTop + 50)));
tallestHomeDiv = $('.dislike').outerHeight(true);
placeElements();
stickyNav();
showBetterThings();
});
function stickyNav() {
$('.navbar').affix({offset: {top: navTop} });
}
function placeElements() {
$('article.betterThings').css('position', 'absolute');
$('article.betterThings').css('top', belowHeader / 2);
$('article.betterThings').css('transform', 'translateY(-50%)');
$('article.balance').css('margin-top', belowHeader);
$('article.balance').css('height', tallestHomeDiv);
$('article.busy').css('margin-top', belowHeader);
$('article.busy').css('height', tallestHomeDiv);
$('article.dislike').css('margin-top', belowHeader);
}
function showBetterThings() {
$('article.betterThings').addClass('show');
}
/****************************************
GLOBAL STYLES
****************************************/
/*=-=-=-=-=-=-= header =-=-=-=-=-=-=-=-=*/
.header {
background-color: #323232;
}
.fullLogo {
padding: 1%;
margin: 0 auto;
}
/*=-=-=-=-=-=-= navigation -=-=-=-=-=-=-=*/
.navCont {
min-height: 50px;
}
.navbar {
border-radius: 0;
margin: 0;
background-color: #316924;
-webkit-transition: all 1s ease-in;
-moz-transition: all 1.5s ease-in;
-ms-transition: all 1.5s ease-in;
-o-transition: all 1.5s ease-in;
transition: all 1.5s ease-in;
}
.navbar.affix {
top: 0;
width: 100%;
z-index: 100;
background-color: #323232;
-webkit-transition: all 1.5s ease-in;
-moz-transition: all 1.5s ease-in;
-ms-transition: all 1.5s ease-in;
-o-transition: all 1.5s ease-in;
transition: all 1.5s ease-in;
}
.navbar > .container-fluid > .navbar-collapse > .navbar-nav > .active > a {
background-color: #323232;
}
.navbar.affix > .container-fluid > .navbar-collapse > .navbar-nav > .active > a {
background-color: #316924;
}
.houseLogo {
height: 45px;
margin-top: -13px;
}
/*=-=-=-=-=-=-=-=- body =-=-=-=-=-=-=-=-=*/
section.content {
}
h1.home, h2.home {
font-family: 'Kaushan Script', cursive;
color: #b30047;
text-align: center;
}
p.home {
color: #5dd9d5;
}
a.home.scroll {
color: #b30047;
font-size: .75em;
}
article.home {
background-color: rgba(0, 0, 0, .5);
font-size: 1.25em;
padding: 25px;
border-radius: 10px;
}
article.betterThings {
margin-right: 8.33333%;
text-align: center;
opacity: 0;
}
article.betterThings.show {
opacity: 1;
-webkit-transition: opacity 5s ease-in-out;
-moz-transition: opacity 5s ease-in-out;
-ms-transition: opacity 5s ease-in-out;
-o-transition: opacity 5s ease-in-out;
transition: opacity 5s ease-in-out;
}
div.first {
padding-left: 0;
}
div.last {
padding-right: 0;
}
.homeBackVideo {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
opacity: 0.5;
}
.content {
height: 1000px;
}
.aside {
}
/*=-=-=-=-=-=-=-= footer -=-=-=-=-=-=-=-=*/
.footer {
background-color: black;
width: 100%;
margin-top: 50px;
padding: 0;
}
.footerContact {
margin: 15px;
height: 2em;
}
/*****************************************
MEDIA QUERIES
******************************************/
/*=-=-=-=-=-= for mobile only =-=-=-=-=-=*/
#media only screen and (max-width: 767px) {
.navbar > div.container-fluid > div.navbar-header > a.navbar-brand {
opacity: 0;
-webkit-transition: all 0.75s ease-in;
-moz-transition: all 0.75s ease-in;
-ms-transition: all 0.75s ease-in;
-o-transition: all 0.75s ease-in;
transition: all 0.75s ease-in;
}
.navbar.affix > div.container-fluid > div.navbar-header > a.navbar-brand {
opacity: 1;
-webkit-transition: all 0.75s ease-in;
-moz-transition: all 0.75s ease-in;
-ms-transition: all 0.75s ease-in;
-o-transition: all 0.75s ease-in;
transition: all 0.75s ease-in;
}
}
/*=-=-=-=-=-for tablet and below=-=-=-=-=*/
#media only screen and (max-width: 991px) {
div.first, div.middle, div.last {
padding: 0;
}
article.busy, article.dislike {
margin-top: 25px !important;
}
}
/*=-=-=-=-=-= for tablet only =-=-=-=-=-=*/
#media only screen and (min-width: 768px) and (max-width: 991px) {
}
/*=-=-=-=-= for tablet and above =-=-=-=-*/
#media only screen and (min-width: 768px) {
.navbar > div.container-fluid > div.navbar-header {
width: 0;
overflow: hidden;
-webkit-transition: all 0.75s ease-in-out;
-moz-transition: all 0.75s ease-in-out;
-ms-transition: all 0.75s ease-in-out;
-o-transition: all 0.75s ease-in-out;
transition: all 0.75s ease-in-out;
}
.navbar.affix > div.container-fluid > div.navbar-header {
padding: 0px;
width: 190px;
-webkit-transition: all 0.75s ease-in-out;
-moz-transition: all 0.75s ease-in-out;
-ms-transition: all 0.75s ease-in-out;
-o-transition: all 0.75s ease-in-out;
transition: all 0.75s ease-in-out;
}
}
/*=-=-=-=-=- for desktop only =-=-=-=-=-=*/
#media only screen and (min-width: 992px) {
h1.home {
font-size: 3em;
margin-bottom: .75em;
}
}
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kaushan+Script">
<link rel="stylesheet" href="./css/styles.css">
<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script defer src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script defer src="./scripts/kelliKlean.js"></script>
</head>
<body>
<div class="container-fluid mainContainer">
<!--=-= HEADER =-==-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-->
<div class="row">
<header class="header col-xs-12">
<img class="img-responsive fullLogo" src="./resources/fullLogo.png" alt="full logo"/>
</header>
</div>
<!--=-= NAV BAR -==-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-->
<div class="row navCont">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img class="img-responsive houseLogo" src="./resources/navLogo.png" alt="full logo"/></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-usd"></span> Quote</li>
<li><span class="glyphicon glyphicon-map-marker"></span> Map</li>
</ul>
</div>
</div>
</nav>
</div>
<!--=-= CONTENT -==-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-->
<div class="row">
<!---- backgroung video --------------------------------------------------------------------->
<video loop muted autoplay class="homeBackVideo">
<source src="./resources/beach.mp4" type="video/mp4">
</video>
<section class="content col-xs-12">
<div class="row">
<article class="home betterThings col-xs-10 col-xs-offset-1">
<h1 class="home">Because you have better things to do!</h1>
<p class="home">Wouldn't you rather drive to the beach and spend your Saturday basking in the warmth
of the sun and cooling off in the shallow, salty water of the Gulf instead of cleaning
your home? Life is short, enjoy it!</p>
<a class="home scroll btn btn-default" href="#">Scroll Down<br>
<span class="home glyphicon glyphicon-menu-down"></span>
</a>
</article>
</div>
<div class="row">
<div class="first col-xs-10 col-xs-offset-1 col-md-3">
<article class="home balance">
<img class="balance img-responsive" src="./resources/balance.jpg"/>
<h2 class="home balance">It's All About Balance</h2>
<p class="home">After a long day at work, the last thing you want to worry about is cleaning your
home, not to mention that it depletes valuable time that you could be enjoying other activities.
Even if you don't need a daily housekeeper, having a scheduled cleaning a couple times a month
will help balance the scales between work and life. Remember, we work to live, we don't live to
work!</p>
</article>
</div>
<div class="middle col-xs-10 col-xs-offset-1 col-md-offset-0 col-md-4">
<article class="home busy">
<img class="busy img-responsive" src="./resources/busy.jpg"/>
<h2 class="home busy">Who Has the Time?</h2>
<p class="home">If your schedule is already packed full, finding the time to clean is never easy.
Between dropping the kids off, driving to work, cooking dinner, and walking the dog, who has
the time to clean? Studies have shown conflict among busy families can often come from the
stress of finding (or spending) time to clean. Hiring a housekeeper can help lower your stress
level by allowing you to fit in everything else your busy days have to offer. </p>
</article>
</div>
<div class="last col-xs-10 col-xs-offset-1 col-md-offset-0 col-md-3">
<article class="home dislike">
<img class="balance img-responsive" src="./resources/dislike.jpg"/>
<h2 class="home balance">Please NO!</h2>
<p class="home">If you are like most people, in lieu of cleaning you would rather be doing... well,
anything! Let's face it: cleaning is not the most desirable way to spend your time. Also, some people
are just better at cleaning that others. If it takes you hours to clean your home and you hate every
minute of it, why not hire someone that would do it faster so you can devote your time to
whatever it is you would rather be doing?</p>
</article>
</div>
</div>
<!--=-= FOOTER =-==-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-->
<div class="row">
<footer class="footer col-xs-12">
<img class="footerContact" src="./resources/facebook.png"/>
<img class="footerContact" src="./resources/email.png"/>
<img class="footerContact" src="./resources/call.png"/>
</footer>
</div>
</section>
</div>
</div>
</body>
</html>
It seems to me that the problem is that your code for retrieving the height of the highest div happens before the images on the page are loaded, making the highest div quite low.
It could be solved by executing the code on window.load rather than document.ready, but please consider a more elegant solution (I would try to look up if bootstrap does not support this)
As Jakub suggested, I looked into boostrap functionality to support what I was trying to accomplish. It turns out using the built in .card class in bootstrap will achieve what I wanted. I can create a deck of card that will all have the same height and eliminate the need for the dynamically calculated values in javascript.
I have some javascript set up so that when I hover an image, it changes to a different image. The only problem is, that it's instant. How would I add a transition to this to make it smooth, to fade between the images?
<div class="social">
<ul class="sociallinks">
<li>
<a href="https://www.linkedin.com/in/lee-jordan">
<img class="linkedinIcon" src="assets/images/linkedin.png" />
</a>
</li>
<li>
<a href="https://github.com/loxol">
<img class="githubIcon" src="assets/images/github.png" />
</a>
</li>
</ul>
</div>
$(document).ready(function() {
$(".linkedinIcon").hover(function() {
$(this).attr("src", "assets/images/linkedinhover.png");
}, function() {
$(this).attr("src", "assets/images/linkedin.png");
});
});
You can do it on different ways, but you can't fade the same image when replacing the src. You could use two img tags, or even place the hover image as background of the img tag, and fade out the image on hover using css transitions. Here is one example:
$(function() {
$(".linkedinIcon").hover(function() {
$(this).css("opacity", 0);
}, function() {
$(this).css("opacity", 1);
});
});
ul.sociallinks {
list-style: none;
}
ul.sociallinks a {
width: 300px;
height: 200px;
display: block;
}
ul.sociallinks img {
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
transition: opacity 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="social">
<ul class="sociallinks">
<li>
<a href="#" style="background-image: url('http://dummyimage.com/300x200/2e97c7/2e97c7&text=2');">
<img class="linkedinIcon" src="http://dummyimage.com/300x200/c72cc7/c72cc7&text=1" />
</a>
</li>
</ul>
</div>
Even possible without JS at all, css only:
ul.sociallinks {
list-style: none;
}
ul.sociallinks a {
width: 300px;
height: 200px;
display: block;
}
ul.sociallinks img {
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
transition: opacity 1s;
}
ul.sociallinks img:hover {
opacity: 0;
}
<div class="social">
<ul class="sociallinks">
<li>
<a href="#" style="background-image: url('http://dummyimage.com/300x200/2e97c7/2e97c7&text=2');">
<img class="linkedinIcon" src="http://dummyimage.com/300x200/c72cc7/c72cc7&text=1" />
</a>
</li>
</ul>
</div>
Here is a plain css3 solution:
ul.sociallinks a img {
position: absolute;
top: 0;
height: 250px;
}
.animate {
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;
}
.changeDisplayOnHover .showOnHover {
opacity: 0;
}
.changeDisplayOnHover .hideOnHover {
opacity: 1;
}
.changeDisplayOnHover:hover .showOnHover {
opacity: 1;
}
.changeDisplayOnHover:hover .hideOnHover {
opacity: 0;
}
<div class="social">
<ul class="sociallinks">
<li>
<a href="#" class="changeDisplayOnHover">
<img class="hideOnHover animate" src="https://66.media.tumblr.com/avatar_8107bb8004a8_128.png" />
<img class="showOnHover animate" src="http://www.aqua-soft.org/forum/uploads/post-25-1229846653.png" />
</a>
</li>
</ul>
</div>
2 effects using CSS:
.changeableImage {
background:url(http://cdn.quotesgram.com/small/94/89/854123786-colorful-nature-wallpaper.jpg);
display:block;
width:300px;
height:200px;
transition: padding 2s;
box-sizing:border-box;
overflow: hidden;
}
.changeableImage:hover{
padding-top:200px;
}
.changeableBG {
background:url(http://cdn.quotesgram.com/small/94/89/854123786-colorful-nature-wallpaper.jpg);
display:block;
width:300px;
height:200px;
transition: padding 2s;
box-sizing:border-box;
overflow: hidden;
}
.changeableBG img{
display:block;
width:300px;
height:200px;
transition: all 2s;
box-sizing:border-box;
overflow: hidden;
position:relative;
}
.changeableBG img:hover{
transform: translateY(200px);
}
<div class="social">
<ul class="sociallinks">
<li>
<a href="#">
<img class="changeableImage" src="http://free4kwallpaper.com/wp-content/uploads/nature/Colorful-UHD-4K-Mountains-Wallpaper-300x200.jpg" />
</a>
<br>
<a class="changeableBG" href="#">
<img src="http://free4kwallpaper.com/wp-content/uploads/nature/Colorful-UHD-4K-Mountains-Wallpaper-300x200.jpg" />
</a>
</li>
</ul>
</div>
On my site, there are icons on a "dock" and when the user hovers over one, a short description "falls" from the icon. Here is the CSS for the effect, which works fine in Dreamweaver, but doesn't seem to work in any browser.
<style>
.css3-notification {
font-size: .8em;
text-align: center;
padding: 10px;
color: #2b2b2b;
margin-left: 20px;
position: relative;
font-weight: bold;
-webkit-animation: ease-in 800ms;
-moz-animation: ease-in 800ms;
-o-animation: ease-in 800ms;
animation: ease-in 800ms;
}
#-webkit-keyframes ease-in {
from {top: -40px; opacity:0;}
to {top: 0px;}
}
#keyframes ease-in {
from {top: -40px; opacity:0;}
to {top: 0px;}
}
</style>
<div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item" href="#"><img src="../Site images/Bill#2x.png" alt="home" /><span class="css3-notification"><font size="3">IDEATION</font><p>Put your idea on paper</p></span>
<a class="dock-item" href="#"><img src="../Site images/Jesus#2x.png" alt="contact" /><span class="css3-notification"><font size="3">TEAM</font><p>Build a team</p></span>
<a class="dock-item" href="#"><img src="../Site images/Financestat#2x.png" alt="music" /><span class="css3-notification"><font size="3">MVP</font><p>Track and compile data from testing</p></span>
<a class="dock-item" href="#"><img src="../Site images/Dollarbag#2x.png" alt="video" /
> <span class="css3-notification"><font size="3">Funding</font><p>Find Funding</p></span>
<a class="dock-item" href="#"><img src="../Site images/Spaceship#2x.png" alt="history" /><span class="css3-notification"><font size="3">LAUNCH</font><p>Successfully Launch</p></span>
</div>
</div>
Not quite sure how exactly are you trying to do this, but here is a simple trick that may be helpful. Initially have your .css3-notification to display:none. Then on hover of the parent .dock-item, display the child .css3-notification; like below:
a.dock-item:hover .css3-notification
{
display:block;
}
I am coding a website which needs the full-screen fadein fadeout slider with content and next previous navigation . So I found this.
But the main problem is that I need this effect to fadein fadeout.
You can use bootstrap-carousel
http://getbootstrap.com/javascript/#carousel
For auto-gen help
http://www.bootply.com/64693
Here I'm giving one work-around for you with this fiddle http://jsfiddle.net/fj75wqwc/
The same is below:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<style>
.carousel.carousel-fade .item {
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
opacity: 0;
}
.carousel.carousel-fade .active.item {
opacity: 1;
}
.carousel.carousel-fade .active.left,
.carousel.carousel-fade .active.right {
left: 0;
z-index: 2;
opacity: 0;
filter: alpha(opacity=0);
}
.carousel.carousel-fade .next,
.carousel.carousel-fade .prev {
left: 0;
z-index: 1;
}
.carousel.carousel-fade .carousel-control {
z-index: 3;
}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="page-header text-center">
<h1>Bootstrap Carousel with fade effect</h1>
</div>
<div class="span6 offset3">
<div id="carousel_fade" class="carousel slide carousel-fade">
<div class="carousel-inner">
<div class="item active">
<!-- you can add any content here-->
<img src="http://placehold.it/600x400&text=Fade+effect-Page-1">
</div>
<div class="item ">
<!-- you can add any content here-->
<img src="http://placehold.it/600x400&text=Fade+effect-Page-2">
</div>
</div>
<a class="carousel-control left btn-control " href="#carousel_fade" data-slide="prev">‹</a>
<a class="carousel-control right btn-control" href="#carousel_fade" data-slide="next">›</a>
</div>
</div>
</div>
</div>
<script>
$(function() {
$('.carousel').carousel({
interval: 7000
})
})
</script>
</body>
</html>