I've made a scroll down animated button but the animation don't work.
I don't know whats wrong. I've tried it with -webkit-animation: sdb10 2s infinite and animation: sdb10 2s infinite but it looks like that there is no effect.
.scrolldown span {
position: absolute;
top: 0;
width: 30px;
height: 50px;
border: 2px solid #1F1F1F;
border-radius: 50px;
box-sizing: border-box;
}
.scrolldown {
position: fixed;
width: 30px;
height: 75px;
bottom: -25px;
left: 50%;
z-index: 2;
display: inline-block;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
letter-spacing: .1em;
text-decoration: none;
transition: opacity .3s;
}
.scrolldown span::before {
position: absolute;
top: 10px;
left: 50%;
content: '';
width: 6px;
height: 6px;
margin-left: -3px;
background-color: #1F1F1F;
border-radius: 100%;
-webkit-animation: sdb10 2s infinite;
animation: sdb10 2s infinite;
box-sizing: border-box;
}
.scrolldown span::after {
position: absolute;
bottom: -20px;
left: 50%;
width: 18px;
height: 18px;
content: '';
margin-left: -9px;
border-left: 2px solid #1F1F1F;
border-bottom: 2px solid #1F1F1F;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: sdb05 1.5s infinite;
animation: sdb05 1.5s infinite;
box-sizing: border-box;
}
<div class="scrolldown">
<span></span>
</div>
body {
width: 100%;
height: 100%;
}
html {
width: 100%;
height: 100%;
}
#media(min-width:767px) {
.navbar {
padding: 20px 0;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
}
.top-nav-collapse {
padding: 0;
}
}
.intro-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #fff;
}
.about-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #eee;
}
.services-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #fff;
}
.contact-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #eee;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bubbology</title>
<link href="css/maincss/bootstrap.min.css" rel="stylesheet">
<link href="css/maincss/scrolling-nav.css" rel="stylesheet">
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top"></a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<section id="about" class="about-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>About Section</h1>
</div>
</div>
</div>
</section>
<section id="services" class="services-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Services Section</h1>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Contact details</h1>
<div style="float:left;"><p>Mobile No:</p></div>
<div style="float:left;"><p></p></div>
</div>
<div style="float:left;" >
<p><a>Contact Us:</a></p>
</div>
<div style="float:left;">
<p></p>
</div>
</div>
</div>
</section>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
</body>
</html>
you forgot to to include the css3 animation itself:
#-webkit-keyframes sdb10 {
0% {
-webkit-transform: translate(0, 0);
opacity: 0;
}
40% {
opacity: 1;
}
80% {
-webkit-transform: translate(0, 20px);
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes sdb10 {
0% {
transform: translate(0, 0);
opacity: 0;
}
40% {
opacity: 1;
}
80% {
transform: translate(0, 20px);
opacity: 0;
}
100% {
opacity: 0;
}
}
Related
Recently, I've been building a website for a keyboard-enthusiast business. On the home page, I have category buttons that animate when hovered. However, it abruptly ends once the mouse cursor is no longer on it. To combat this problem, I decided to use the psuedo-elements: :hover::after. I created a new animation called afterbuttonslide with the following code and assigned it to the psuedo-element like this:
#keyframes afterbuttonhoverslide {
0% {
padding: 0 25 0 0;
}
100% {
padding: 0;
}
}
.homepagecategories:hover::after {
animation: 0.2s ease-out 0s 1 afterbuttonhoverslide;
animation-fill-mode: forwards;
}
This however doesn't execute the animation as intended. After reading other Stack Overflow answers such as Deepak Yadev's and an article from GeeksforGeeks, I tried adding content: ""; and temporaily removing my psuedo-element :hover with underwhelming results. Perhaps the psuedo-element :after is simply ineffective on anything but anchors? I'm willing to take any answer that can provide me with the same result I intended before.
Rest of my code:
<head>
<title>HotDogKeyboards</title>
<link rel="icon" href="https://drive.google.com/uc?export=download&id=1Ka7ylovILyZSEcIUTituT9f_uzFdKfCl">
</head>
<body style="margin: 0; padding: 0; background-color: #2e3440;">
<!-- This style element is temporary to display CSS on the same script as my HTMl code. -->
<style>
/* Imported Fonts */
#font-face {
font-family: Roboto;
src: url(https://drive.google.com/uc?export=download&id=1PopP9idetRz1ULFNGXyP6kraMyV4bt5F);
}
#font-face {
font-family: Poppins;
src: url(https://drive.google.com/uc?export=download&id=16AyE8WbBCW13Z-Ixbmctio3TKuajAhwt);
}
#font-face {
font-family: indie-flower;
src: url(https://drive.google.com/uc?export=download&id=1NosWGJF7-PsfwCHZI_es8anZhO_bz8wu);
}
#font-face {
font-family: red-seven;
src: url(https://drive.google.com/uc?export=download&id=1Xs4IIqDBGc_lCYFBLeC6DPhohsJPBeTp);
}
#font-face {
font-family: good-times;
src: url(https://drive.google.com/uc?export=download&id=1nj8_G-SMT-2Bqh8kVdRJ0w7D8DXzmomC);
}
/* Property specific classes*/
h1.temporarywait {
font-family: Roboto;
}
p.temporarywait {
font-family: Poppins;
}
img.mainicon {
width: 13%;
}
a.headerbuttons {
padding: 10px 15px 10px 15px;
font-size: 27px;
font-family: indie-flower;
text-decoration: none;
color: black;
}
a:visited.headerbuttons {
color: black;
}
a:active.headerbuttons {
color: white;
background-color: #FFFF9F;
margin: 0;
}
a:hover.headerbuttons {
background-color: #FFF017;
color: white;
}
a:hover.button {
background-color: #EFCC00;
}
a:visited.button {
color: black;
}
p.categorytop {
font-family: good-times;
color: white;
font-size: 3vw;
text-align: center;
}
/* Classes */
.header {
background-color: #EAAA00;
padding: 25px;
margin: 0;
position: fixed;
z-index: 99;
width: 100%;
/*TEMPORARY, REMOVE WHEN NECESSARY*/
opacity: 0%;
}
.headerbuttons {
display: inline-block;
padding: 2.5px 4px 2.5px 4px;
margin: 0;
}
.headerlinkwrapper {
background-color: #EFCC00;
width: 100%;
position: fixed;
margin: 0 0 0 -25;
z-index: 99;
}
.featuredproducttext {
position: absolute;
top: 50%;
left: 30px;
color: white;
font-family: red-seven;
font-size: 2.2vw;
}
.featuredproductbutton {
position: absolute;
top: 75%;
left: 30px;
}
.button {
background-color:#EAAA00;
text-align: center;
text-decoration: none;
padding: 1.5vw 2vw;
font-size: 2vw;
font-family: Poppins;
color: black;
}
.featuredproductinfo {
position: absolute;
top: 60%;
left: 30px;
color: white;
font-size: 1.3vw;
font-family: red-seven;
}
.categorytop {
padding: 0.5em 0 0.5em 0;
background-color: #434c5e;
margin: 4px 0 0 0;
}
.categorytext {
color: #e5e9f0;
font-family: good-times;
font-size: 1.7vw;
position: absolute;
top: 23%;
left: 5px;
}
/*Class Animations*/
.featuredproducttext {
animation: 1.7s ease-out 0s 1 slidein;
}
.featuredproductinfo {
animation: 1s ease-out 0s 1 slidein;
animation-fill-mode: both;
animation-delay: 1.7s;
}
.featuredproductbutton {
animation: 1.5s ease-out 0s 1 slideappearance;
animation-fill-mode: both;
animation-delay: 2.9s;
}
.headershowanimation {
animation: 1s ease-out 0s 1 headershow;
}
.headerhideanimation {
animation: 1s ease-out 0s 1 headershow;
}
.homepagecategories {
width: 20%;
height: 17.6vw;
transform: skew(-20deg);
display: inline-block;
margin: -5;
overflow: hidden;
}
/*Homepage Category Images*/
.category1 {
background-image: url("https://drive.google.com/uc?export=download&id=1EmJgZ15Se4XmJUSD4asHA2fu-vhYphvx");
}
.category2 {
background-image: url("https://drive.google.com/uc?export=download&id=1iyEtTFXeYrKK-shG16nixjcX7W54vqv1");
}
.category3 {
background-image: url("https://drive.google.com/uc?export=download&id=1iPUbZjhhx7Nu_8tPoRniJGjPcj6zJAI6");
}
.category4 {
background-image: url("https://drive.google.com/uc?export=download&id=1LAIxyXDgEhromN7v5loednVbX97UtlIB");
}
.category5 {
background-image: url("https://drive.google.com/uc?export=download&id=1Yxm4BQx36QbMNrq4Wox7ox5gR0u0yjfu");
}
/*End of Category Images*/
.homepagecategorycontainer {
overflow: hidden;
background-color: #333333;
position: relative;
}
.homepagecategorycontent {
transform: skew(20deg);
background-repeat: no-repeat;
background-size: cover;
width: 33vw;
height: 33vw;
position: absolute;
}
.homepagecategories:hover::after {
animation: 0.2s ease-out 0s 1 afterbuttonhoverslide;
animation-fill-mode: forwards;
}
.homepagecategories:hover {
animation: 0.5s ease-out 0s 1 buttonhoverslide;
animation-fill-mode: forwards;
}
.homepagecategories:hover .homepagecategorycontent {
animation: 0.5s ease-out 0s 1 buttonimageslide;
animation-fill-mode: forwards;
}
.homepagecategories:hover .categorytext {
animation: 0.7s ease-out 0s 1 slightright;
animation-fill-mode: forwards;
}
/* IDs */
#featuredproduct {
position: relative;
text-align: center;
}
/*Animations*/
#keyframes slidein {
0% {
transform: translateX(-100%);
opacity: 0%;
}
100% {
transform: translateX(-20);
opacity: 100%;
}
}
#keyframes slideappearance {
0% {
opacity: 0%;
top: 77%;
}
100%{
opacity: 100%;
top: 75%;
}
}
#keyframes headerhide {
0% {
top: 120px;
}
100% {
top: -100%
}
}
#keyframes headershow {
0% {
top: -100%;
}
100%{
top: 120px;
}
}
#keyframes buttonhoverslide {
0% {
padding: 0;
}
100% {
padding: 0 25 0 0;
}
}
#keyframes buttonimageslide {
0% {
background-position: 0 0;
}
100% {
background-position: -30 0;
}
}
#keyframes afterbuttonhoverslide {
0% {
padding: 0 25 0 0;
}
100% {
padding: 0;
}
}
#keyframes floatandappear {
0% {
opacity: 0%;
}
100% {
opacity: 100;
transform: translateX();
}
}
#keyframes slightright {
0% {
top: 23%;
left: 5px;
}
100% {
top: 23%;
left: 10px;
}
}
</style>
<!-- Fixed Header -->
<header>
<div class="header" id="header">
<div>
<center>
<img class="mainicon" src="https://drive.google.com/uc?export=download&id=1blJIRZ7SCMqXqTPJ0REXchspxgWJ5k7t">
</center>
</div>
<center>
<div class="headerlinkwrapper">
<div class="headerbuttons">
<a class="headerbuttons" href="#">Test</a>
</div>
<div class="headerbuttons">
<a class="headerbuttons" href="#">Test</a>
</div><div class="headerbuttons">
<a class="headerbuttons" href="#">Test</a>
</div>
</div>
</center>
</div>
</div>
</header>
<!--Featured Product Header -->
<div id="toppage">
</div>
<!-- Featured Product Section -->
<div id="featuredproduct">
<img src="https://drive.google.com/uc?export=download&id=1_b_5r5jFu92jUrou8p9Y4GgTfaABG2Jq" width="100%">
<!-- Product Name -->
<div class="featuredproducttext">
Placeholder Keyboard
</div>
<!-- Brief Product Info -->
<div class="featuredproductinfo">
Awesome, and even more awesome.
</div>
<div class="featuredproductbutton">
Learn More
</div>
</div>
</div>
<!-- Categories -->
<div class="categorytop">
<p class="categorytop">Categories</p>
</div>
<center>
<div class="homepagecategorycontainer">
<a href="#">
<div class="homepagecategories">
<div class="homepagecategorycontent category1">
</div>
<div class="categorytext">
Switches
</div>
</div>
</a>
<a href="#1">
<div class="homepagecategories">
<div class="homepagecategorycontent category2">
</div>
<div class="categorytext">
Keycaps
</div>
</div>
</a>
<a href="#2">
<div class="homepagecategories">
<div class="homepagecategorycontent category3">
</div>
<div class="categorytext">
Keyboards
</div>
</div>
</a>
<a href="#3">
<div class="homepagecategories">
<div class="homepagecategorycontent category4">
</div>
<div class="categorytext">
Group Buy
</div>
</div>
</a>
<a href="#4">
<div class="homepagecategories">
<div class="homepagecategorycontent category5">
</div>
<div class="categorytext">
Misc.
</div>
</div>
</a>
</div>
</center>
</body>
You can use :hover css event on elements. ::after is not what you need.
You don't need an animation to do this.. you can set transition: xx to your button (not :hover) and when the button is hovered you can change the padding or resize it.
And remember that padding: 0 25 0 0; is not correct, you have to specify 25 what. For example 25px.
Here an example:
button {
transition: all .2s linear;
}
button:hover {
padding: 0 25px 0 0;
}
<button>Hello</button>
When I hover over the border, the animation does not render
The original code pen link is as shown below
https://codepen.io/anon/pen/GVvxqq
i need the product class css to remain
how do i add in the animation without affecting the product class?
//HTML
<template>
<div class="item button draw">
<b-link #click="productDetail(item.productId)">
<div class="product">
<a class="img-prod">
<img
class="img-fluid product-image"
:src="item.options[0].productImages[0].imageUrl"
alt="Product Item"
/>
<span v-if="item.discounts.length != 0" class="status">{{discountPercentageTag}}% OFF</span>
</a>
<div class="text pt-3 px-3">
<h3>{{item.productName}}</h3>
<div class="d-flex">
<div class="pricing">
<p v-if="item.discounts.length != 0" class="price">
<span class="mr-2 price-dc">${{item.price.toFixed(2)}}</span>
<span class="price-sale">${{discountPrice.toFixed(2)}}</span>
</p>
<p v-else class="price">
<span>${{item.price.toFixed(2)}}</span>
</p>
</div>
</div>
</div>
</div>
</b-link>
</div>
</template>
//CSS
i need the product class css to remain
.product{
display: block;
width: 100%;
margin-bottom: 30px;
#include media-breakpoint-down(md){
margin-bottom: 30px;
}
.button {
background: none;
border: 0;
box-sizing: border-box;
margin: 1em;
padding: 1em 2em;
box-shadow: inset 0 0 0 2px #f45e61;
color: #f45e61;
font-size: inherit;
font-weight: 700;
position: relative;
vertical-align: middle;
}
.button::before, .button::after {
box-sizing: inherit;
content: '';
position: absolute;
width: 100%;
height: 100%;
}
.draw {
transition: color 0.25s;
}
.draw::before, .draw::after {
border: 2px solid transparent;
width: 0;
height: 0;
}
.draw::before {
top: 0;
left: 0;
}
.draw::after {
bottom: 0;
right: 0;
}
.draw:hover::before, .draw:hover::after {
width: 100%;
height: 100%;
}
.draw:hover::before {
border-top-color: #60daaa;
border-right-color: #60daaa;
transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.draw:hover::after {
border-bottom-color: #60daaa;
border-left-color: #60daaa;
transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}
.img-prod{
position: relative;
display: block;
overflow: hidden;
span.status{
position: absolute;
top: 10px;
left: -1px;
padding: 2px 15px;
color: $black;
font-weight: 300;
background: $primary;
}
img{
-webkit-transform: scale(1.0);
-moz-transform: scale(1.0);
-ms-transform: scale(1.0);
-o-transform: scale(1.0);
transform: scale(1.0);
#include transition(.3s);
}
&:hover, &:focus{
img{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
}
}
Only the border colour is rendered but not the animation
I have fixed it. something wrong with template tag i have removed it and worked.
.button {
background: none;
border: 0;
box-sizing: border-box;
margin: 1em;
padding: 1em 2em;
box-shadow: inset 0 0 0 2px #f45e61;
color: #f45e61;
font-size: inherit;
font-weight: 700;
position: relative;
vertical-align: middle;
}
img{width:100%}
.button::before, .button::after {
box-sizing: inherit;
content: '';
position: absolute;
width: 100%;
height: 100%;
}
.draw {
transition: color 0.25s;
}
.draw::before, .draw::after {
border: 2px solid transparent;
width: 0;
height: 0;
}
.draw::before {
top: 0;
left: 0;
}
.draw::after {
bottom: 0;
right: 0;
}
.draw:hover::before, .draw:hover::after {
width: 100%;
height: 100%;
}
.draw:hover::before {
border-top-color: #60daaa;
border-right-color: #60daaa;
transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.draw:hover::after {
border-bottom-color: #60daaa;
border-left-color: #60daaa;
transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}
<div class="item button draw">
<b-link #click="productDetail(item.productId)">
<div class="product">
<a class="img-prod">
<img
class="img-fluid product-image"
:src="https://colorlib.com/wp/wp-content/uploads/sites/2/store-free-template.jpg"
alt="Product Item"
/>
<spanclass="status">test OFF</span>
</a>
<div class="text pt-3 px-3">
<h3>test</h3>
<div class="d-flex">
<div class="pricing">
<p v-if="item.discounts.length != 0" class="price">
<span class="mr-2 price-dc">$5423</span>
<span class="price-sale">$5345</span>
</p>
<p v-else class="price">
<span>$435345</span>
</p>
</div>
</div>
</div>
</div>
</b-link>
</div>
You need to wrap the entire block in <section class="buttons"> and change the outermost <div> to <button> if you want to use the CSS as-is from the codepen. I have tested this and it works as expected.
<template>
<section class="buttons">
<button class="item button draw">
<b-link #click="productDetail(item.productId)">
//
// custom element content
//
</b-link>
</button>
</section>
</template>
I'm setting up several Bootstrap media objects and I want for a FontAwesome icon to show up on the image as an overlay when the mouse hovers, once clicked this opens a fancybox.
I've tried moving things around quite a bit, but at this putting I think I'm having tunnel vision. Please help!
My code snippet:
/**The CSS I've been trying to use: **/
.overlay-hover:hover .image {
opacity: 0.85;
transition: 1s ease;
}
.overlay-hover:hover .overlay {
opacity: 1;
}
.overlay {
transition: 1s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
<div class="card bg-light mb-3 shadow">
<div class="card-body">
<div class="media">
<img src="https://via.placeholder.com/150x300"style="height:125px;width: auto" class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Title</h5>
<p>Text</p>
<span class="badge badge-primary">One</span>
</div>
</div>
</div>
</div>
Not being able to achieve the results I want, so hopefully someone will be able to easily tell what I'm doing wrong.
This is what you were looking for?
*,
*:before,
*:after {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container {
padding: 1em 0;
float: left;
width: 50%;
}
#media screen and (max-width: 640px) {
.container {
display: block;
width: 100%;
}
}
#media screen and (min-width: 900px) {
.container {
width: 33.33333%;
}
}
.container .title {
color: #1a1a1a;
text-align: center;
margin-bottom: 10px;
}
.content {
position: relative;
width: 90%;
max-width: 400px;
margin: auto;
overflow: hidden;
}
.content .content-overlay {
background: rgba(0, 0, 0, 0.7);
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.content:hover .content-overlay {
opacity: 1;
}
.content-image {
width: 100%;
}
.content-details {
position: absolute;
text-align: center;
padding-left: 1em;
padding-right: 1em;
width: 100%;
top: 50%;
left: 50%;
opacity: 0;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.content:hover .content-details {
top: 50%;
left: 50%;
opacity: 1;
}
.fadeIn-bottom {
top: 90%;
}
.media-body {
position: relative;
left: 50%;
top: 50%;
transform: translate;
transform: translate(-50%, -50%);
text-align: center;
white-space: nowrap;
text-overflow: ellipsis;
word-break: break-all;
}
.card-body {
padding: 0!important;
}
.card-body {
background-color: red!important;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row ">
<div class="col-sm-6 card bg-light shadow ">
<h4 class="text-center">Card 1</h4>
<div class=" card-body">
<div class="container">
<div class="row">
<div class="col-9">
<div class="content">
<a href="https://unsplash.com/photos/HkTMcmlMOUQ" target="_blank">
<div class="content-overlay"></div>
<img class="content-image" src="https://images.unsplash.com/photo-1433360405326-e50f909805b3?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=359e8e12304ffa04a38627a157fc3362">
<div class="content-details fadeIn-bottom">
<i class="fab fa-html5"></i>
</div>
</a>
</div>
</div>
<div class="col-3">
<div class="media-body">
<h5 class="mt-0">Title</h5>
<p>Text</p>
<span class="badge badge-primary">One</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 card bg-light shadow ">
<h4 class="text-center">Card 2</h4>
<div class=" card-body">
<div class="container">
<div class="row">
<div class="col-9">
<div class="content">
<a href="https://unsplash.com/photos/HkTMcmlMOUQ" target="_blank">
<div class="content-overlay"></div>
<img class="content-image" src="https://images.unsplash.com/photo-1433360405326-e50f909805b3?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=359e8e12304ffa04a38627a157fc3362">
<div class="content-details fadeIn-bottom">
<i class="fab fa-html5"></i>
</div>
</a>
</div>
</div>
<div class="col-3">
<div class="media-body">
<h5 class="mt-0">Title</h5>
<p>Text</p>
<span class="badge badge-primary">One</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I'm having an issue with an animation on one of my images. I want the image to resize on hover with a transition time (and then have a transition time back to the original size when the mouse moves off the image) but then when i resize the window and the image resizes accordingly, it resizes with the transition time . Does anyone know a way to get around this?
<div class="column">
<a href="-----.html">
<img src="-----.jpg">
</a>
</div>
.column img{
filter: brightness(0.8);
transition: 0.6s ease;
width:100%;
height: calc(100vh - 300px);
}
.column:hover img{
filter: brightness(0.5);
width:110%;
transform: translate(-5%,-5%);
transition: 0.6s ease;
height: calc(110vh - 300px);
}
I can see why the transition applies to the image when the window resizes, but i don't know how else to get the transition to apply when the mouse moves away. Can anyone suggest a way around this?
Gif of resizing issue
edit: full code posted below
html {
height: 100%;
}
body {
min-width: 600px;
min-height: 100%;
position: relative;
font-family: Helvetica;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #FFFFFF;
overflow-y: hidden;
}
/*Header*/
header {
background: #FFFFFF;
color: #F89828;
height: 159px;
}
header img {
margin-left: calc(50% - 122px);
margin-top: 60px;
margin-bottom: 60px;
height: 39px;
width: 244px;
}
.column {
float: left;
position: relative;
text-align: center;
width: 50%;
padding: 0px;
overflow: hidden;
height: calc(100vh - 239px);
}
.row .column img {
background: #000000;
width: 100%;
filter: brightness(0.8);
height: calc(100vh - 239px);
transition: 0.6s ease;
}
.row .column:hover img {
transition: 0.6s ease;
width: 110%;
cursor: pointer;
transform: translate(-5%, -5%);
filter: brightness(0.5);
height: calc(110vh - 239px);
}
.centered {
color: #FFFFFF;
position: absolute;
font-size: 4em;
font-weight: bold;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-decoration: none;
}
/*footer*/
footer {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
bottom: 0;
width: 100%;
height: 80px;
color: #FFFFFF;
background-color: #808080;
font-weight: bold;
}
<body>
<header>
<img src="https://picsum.photos/400/100/?random">
</header>
<div class="row">
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random">
<div class="centered">1</div>
</a>
</div>
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random" />
<div class="centered">2</div>
</a>
</div>
</div>
<footer>
<p>This is where I would put some filler text, if I had any</p>
</footer>
</body>
You could set the transition on your image only when the window is hovered. This way, on resize it won't affect your element anymore, but on your element's hover and mouseout it will still be active.
/* when hovering the page */
:hover .row .column img {
transition: 0.6s ease;
}
.row .column img {
background: #000000;
width: 100%;
filter: brightness(0.8);
height: calc(80vh - 10px);
/* transition: 0.6s ease; [removed]*/
}
.row .column:hover img {
/* transition: 0.6s ease; [useless]*/
width: 110%;
cursor: pointer;
transform: translate(-5%, -5%);
filter: brightness(0.5);
height: calc(80vh - 10px);
}
.column {
float: left;
position: relative;
text-align: center;
width: 50%;
padding: 0px;
overflow: hidden;
height: calc(60vh - 10px);
}
<div class="row">
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random">
<div class="centered">1</div>
</a>
</div>
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random" />
<div class="centered">2</div>
</a>
</div>
</div>
But using this solution, if mousing-out from the document itself, then the transition will also get disabled...
Unfortunately, I don't see any other solution than that, except using js of course.
(function(){
let timer;
const docEl = document.documentElement;
addEventListener('resize', e => {
clearTimeout(timer);
docEl.classList.add('resizing');
timer = setTimeout(_ => docEl.classList.remove('resizing'), 200);
});
})();
:root.resizing .row .column img {
transition: none;
}
.row .column img {
background: #000000;
width: 100%;
filter: brightness(0.8);
height: calc(80vh - 10px);
transition: 0.6s ease;
}
.row .column:hover img {
width: 110%;
cursor: pointer;
transform: translate(-5%, -5%);
filter: brightness(0.5);
height: calc(80vh - 10px);
}
.column {
float: left;
position: relative;
text-align: center;
width: 50%;
padding: 0px;
overflow: hidden;
height: calc(60vh - 10px);
}
<div class="row">
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random">
<div class="centered">1</div>
</a>
</div>
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random" />
<div class="centered">2</div>
</a>
</div>
</div>
You need to assign width without hover for animation on mouse out, check it
.column img{
filter: brightness(0.8);
transition: 0.6s ease;
width:35%;
}
.column:hover img{
filter: brightness(0.5);
width:110%;
transform: translate(-5%,-5%);
transition: 0.6s ease;
}
<div class="column">
<a href="-----.html">
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</a>
</div>
Try this:
.container {
display: inline-block;
width: 64px;
height: 64px;
perspective: 700px;
}
.icon, .icon-one, .icon-two{
position: absolute;
transition: all .5s;
transform-style: preserve-3d;
backface-visibility: hidden;
width:50px;
height:50px;
}
}
.icon-wrap .icon-one{
width:150px;
height:150px;
transform:translate(0%,0%);}
/* ::: HOVER EFFECTS (Remove Automated for this to work) */
.icon-wrap:hover .icon{ transform: translate(0%,0%); }
/* ::: AUTOMATED EFFECTS */
.icon-wrap .icon{
animation: icon-wrap 5s 1s infinite alternate ease-in-out;
-webkit-animation: icon-wrap 5s 1s infinite alternate ease-in-out;
}
#keyframes icon-wrap {
0% { transform:translate(0%,0%); }
100% { transform: translate(40%,40%)scale(2);
width:150px;
height:150px;
}
}
#-webkit-keyframes icon-wrap {
0% { transform: translate(0%,0%); }
100% { transform: translate(40%,40%) scale(2);
width:150px;
height:150px; }
}
<div class="container icon-wrap">
<div class="icon">
<div class="icon-one">
<a href="-----.html">
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</a>
</div>
</div>
</div>
.container {
display: inline-block;
width: 64px;
height: 64px;
perspective: 700px;
}
.icon, .icon-one, .icon-two{
position: absolute;
transition: all .5s;
transform-style: preserve-3d;
backface-visibility: hidden;
width:50px;
height:50px;
}
}
.icon-wrap .icon-one{
width:150px;
height:150px;
transform:translate(40%,40%)scale(2);}
/* ::: HOVER EFFECTS (Remove Automated for this to work) */
.icon-wrap:hover .icon{ transform: translate(40%,40%)scale(2); }
/* ::: AUTOMATED EFFECTS */
.icon-wrap .icon{
animation: icon-wrap 5s 1s infinite alternate ease-in-out;
-webkit-animation: icon-wrap 5s 1s infinite alternate ease-in-out;
}
<div class="container icon-wrap">
<div class="icon">
<div class="icon-one">
<a href="-----.html">
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</a>
</div>
</div>
</div>
Try using scale(2) it's working well for me.
But you need to change translate() value as per the scale() value as per your requirement.
.column img{
filter: brightness(0.8);
transition: 0.6s ease;
}
.column:hover img{
filter: brightness(0.5);
transform: translate(50%,50%) scale(2);
transition: 0.6s ease;
}
<div class="column">
<a href="-----.html">
<img src="https://picsum.photos/300/100/?random">
</a>
</div>
Updated with your code.
html {
height: 100%;
}
body {
min-width: 600px;
min-height: 100%;
position: relative;
font-family: Helvetica;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #FFFFFF;
overflow-y: hidden;
}
/*Header*/
header {
background: #FFFFFF;
color: #F89828;
height: 159px;
}
header img {
margin-left: calc(50% - 122px);
margin-top: 60px;
margin-bottom: 60px;
height: 39px;
width: 244px;
}
.column {
float: left;
position: relative;
text-align: center;
width: 50%;
padding: 0px;
overflow: hidden;
height: calc(100vh - 239px);
}
.row .column img {
background: #000000;
width: 100%;
filter: brightness(0.8);
height: calc(100vh - 239px);
transition: 0.6s ease;
}
.row .column:hover img {
transition: 0.6s ease;
width: 110%;
cursor: pointer;
transform: translate(-10%,-10%) scale(1.3);
filter: brightness(0.5);
height: calc(110vh - 239px);
}
.centered {
color: #FFFFFF;
position: absolute;
font-size: 4em;
font-weight: bold;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-decoration: none;
}
/*footer*/
footer {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
bottom: 0;
width: 100%;
height: 80px;
color: #FFFFFF;
background-color: #808080;
font-weight: bold;
}
<body>
<header>
<img src="https://picsum.photos/400/100/?random">
</header>
<div class="row">
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random">
<div class="centered">1</div>
</a>
</div>
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random" />
<div class="centered">2</div>
</a>
</div>
</div>
<footer>
<p>This is where I would put some filler text, if I had any</p>
</footer>
</body>
Hope this was helpful for you.
I am trying to make some hover effects over an image. See a demosite here. I am getting stuck now, because I would like the box there is coming when you hover to be centered on each image, no matter what the image size is.
I have tried to place the hover with padding, but that is not a good solution. Does anybody knows how I can center the gradient overlay on each picture, no matter the size og the picture?
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.hovereffect:hover .overlay {
background-color: rgba(170,170,170,0.4);
}
.hovereffect h2, .hovereffect img {
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.hovereffect img {
display: block;
position: relative;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.hovereffect:hover img {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.6);
}
.hovereffect a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
text-transform: uppercase;
color: #fff;
border: 1px solid #fff;
margin: 50px 0 0 0;
background-color: transparent;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
font-weight: normal;
height: 85%;
width: 85%;
position: absolute;
top: -20%;
left: 8%;
padding: 70px;
}
.hovereffect:hover a.info {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
background-color: rgba(0,0,0,0.4);
}
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="hovereffect">
<img class="img-responsive" src="https://www.capitalhyundai.ca/wp-content/uploads/sites/385/2017/08/2017-hyundai-elantra-gt-interior-view.jpg" alt="text"></img>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
</div>
<br/><br/>
<div class="row">
<div class="col-sm-5">
<div class="hovereffect">
<img class="img-responsive" src="https://www.carzone.ie/newcar/assets/img/models/kiasportage-abb0540cd673ba0e6dd80d5e1edc9c64.jpg" alt="text"></img>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
</div>
<br/><br/>
<div class="row">
<div class="col-sm-3">
<div class="hovereffect">
<img class="img-responsive" src="http://solcontrolcustomsandtint.com/wp-content/uploads/2014/09/car-audio-system-sound-4.jpg" alt="text"></img>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
</div>
</div>
Firt make the image container inline-block so that its width is defined by its content then you can easily adjust the overlay:
.hovereffect {
display:inline-block;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
transition: all 0.4s ease-in-out;
}
.hovereffect:hover .overlay {
background-color: rgba(170,170,170,0.4);
}
.hovereffect h2, .hovereffect img {
transition: all 0.4s ease-in-out;
}
.hovereffect img {
display: block;
position: relative;
transform: scale(1.1);
}
.hovereffect:hover img {
transform: scale(1);
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.6);
}
.hovereffect a.info {
text-decoration: none;
text-transform: uppercase;
color: #fff;
border: 1px solid #fff;
background-color: transparent;
opacity: 0;
transform: scale(1.5);
transition: all 0.4s ease-in-out;
font-weight: normal;
height: 85%;
width: 85%;
top:7.5%; /* (100% - 85%)/2 */
left:7.5%;
position: absolute;
}
.hovereffect:hover a.info {
opacity: 1;
transform: scale(1);
background-color: rgba(0,0,0,0.4);
}
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="hovereffect">
<img class="img-responsive" src="https://www.capitalhyundai.ca/wp-content/uploads/sites/385/2017/08/2017-hyundai-elantra-gt-interior-view.jpg" alt="text"></img>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
</div>
<br/><br/>
<div class="row">
<div class="col-sm-5">
<div class="hovereffect">
<img class="img-responsive" src="https://www.carzone.ie/newcar/assets/img/models/kiasportage-abb0540cd673ba0e6dd80d5e1edc9c64.jpg" alt="text"></img>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
</div>
<br/><br/>
<div class="row">
<div class="col-sm-3">
<div class="hovereffect">
<img class="img-responsive" src="http://solcontrolcustomsandtint.com/wp-content/uploads/2014/09/car-audio-system-sound-4.jpg" alt="text"></img>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
</div>
</div>