i want to create a roll out effect on hover with a CSS transition but it's not working. Does somebody know the solution? I've already tried different things but nothing works.
This is the HTML (bootstrap3):
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 tile" id="past">
<a href="#" class="item thumbnail">Title
<span class="mouseover margin1">Blablabla</span>
</a>
</div>
This is the CSS:
.mouseover{
display:none;
height: 0em;
overflow: hidden;
transition-property: height;
transition: all 1s ease-in-out;
}
.thumbnail:hover .mouseover{
height: 5em;
display:block;
}
Related
So i have a HTML list where each List item has an image with a header title above it and a box behind the image that transforms on hover. I'm close to getting it to appear the way I'd like, but the list items don't seem to co-operate the way they should. I'm trying to get the box to be directly behind the image and the text to be centered above the box, but currently they are slightly misaligned. Here is a JSFiddle JSFiddle showcasing the List.
an example of one of the list items looks like this:
<li>
<a href = "" class="linkChange">
<h6 class ="headings">Appointment App</h6>
<img class="imgs" id="imgs" src = "https://img.icons8.com/clouds/2x/calendar.png"/>
<span class="box rotate" id = "box"></span>
</a>
</li>
The css is detailed in the JSFiddle. I'm slightly new to Web Dev so forgive me if some of the CSS is redundant.
Instead of using a <span> after your <img> tag, instead put your image in a <div> and apply the background to that div. Also remove the position: absolute; that you have on .imgs and .box.
<div class="box rotate" id = "box">
<img class="imgs" id="imgs" src = "https://img.icons8.com/clouds/2x/calendar.png"/>
</div>
I think you have far too much CSS going on, and many of the styles are redundant, or being overwritten by other styles. But I don't want to focus too much on that, since this isn't a code review, but rather, a solution. I did trim away styles that were unnecessary.
Here is what I changed:
Moved the h6 outside of the link, since users are likely going to click on the large target area of the image, rather than the heading text.
Added display: flex to your anchor and justified its contents to the center.
I set white-space: nowrap on the h6 so that it looks cleaner above the boxes. Here's the result.
.appsList {
list-style: none;
display: flex;
margin: 0 auto;
}
.appsList li {
position: relative;
padding: 100px;
}
.appsList .headings {
color: purple;
white-space: nowrap;
margin: 0 0 .75rem;
font-size: 1.2rem;
}
.linkChange {
display: flex;
justify-content: center;
}
.imgs {
position: absolute;
z-index: 1;
display: inline-block;
}
.box {
position: absolute;
background: #5FCF80;
width: 200px;
height: 200px;
z-index: -1;
}
/* Box comes immediately after imgs, so it can be selected to transform on hover with imgs */
#imgs:hover+#box {
transform: rotate(360deg);
background: #9351A6;
border-radius: 50%;
transition: all 1s ease-in-out;
z-index: -1;
}
.box:hover {
transform: rotate(360deg);
background: #9351A6;
border-radius: 50%;
z-index: -1;
}
.rotate {
transition: all 0.5s ease-in-out;
}
.rotate:hover {
transition: all 1s ease-in-out;
}
<ul class="appsList">
<li>
<h6 class="headings">Appointment App</h6>
<a href="" class="linkChange">
<img class="imgs" id="imgs" src="https://img.icons8.com/clouds/2x/calendar.png" />
<span class="box rotate" id="box"></span>
</a>
</li>
<li>
<h6 class="headings">Second App</h6>
<a href="" class="linkChange">
<img class="imgs" id="imgs" src="https://img.icons8.com/clouds/2x/brain.png" />
<span class="box rotate" id="box"></span>
</a>
</li>
<li>
<h6 class="headings">Banking App</h6>
<a href="" class="linkChange">
<img class="imgs" id="imgs" src="https://img.icons8.com/clouds/2x/bank-building.png" />
<span class="box rotate" id="box"></span>
</a>
</li>
<li>
<h6 class="headings">Reimburement App</h6>
<a href="" class="linkChange">
<img class="imgs" id="imgs" src="https://img.icons8.com/clouds/2x/cash-in-hand.png" />
<span class="box rotate" id="box"></span>
</a>
</li>
</ul>
jsFiddle
This question already has answers here:
CSS Transition on Hover
(6 answers)
Transitions on the CSS display property
(37 answers)
Closed 2 years ago.
I found this thread to have an image appear over another on hover which works great, but the transition is in an instant snap, I'm hoping to make it a smooth crossfade instead like this (I couldn't get the code there to work properly).
Tried adding 'transition: opacity 1s ease-in-out;' which doesn't work, I'm not the best at this so hoping someone could point out what's wrong please?
.imageBox {
position: relative;
float: left;
}
.imageBox .hoverImg {
position: absolute;
left: 0;
top: 0;
display: none;
}
.imageBox:hover .hoverImg {
display: block;
}
<div class="imageBox">
<div class="imageInn">
<a href="https://amovenew.druminternet.uk/first-time-buyer/"><img class="round aligncenter" src="https://www.isbiryatak.com/wp-content/uploads/2019/04/OMURGAPOPUP_MAY19-450x281.png" />
</a>
</div>
<div class="hoverImg">
<a href="https://amovenew.druminternet.uk/first-time-buyer/"><img class="round aligncenter" src="https://i.pinimg.com/originals/2e/52/bc/2e52bc9e2b3bb786820fbfb6366dda02.jpg" />
</a>
</div>
</div>
You have to set an opacity property before you can transition it:
.imageBox {
position: relative;
float: left;
}
.imageBox .hoverImg {
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.imageBox:hover .hoverImg {
opacity: 1;
}
<div class="imageBox">
<div class="imageInn">
<a href="https://amovenew.druminternet.uk/first-time-buyer/"><img class="round aligncenter" src="https://www.isbiryatak.com/wp-content/uploads/2019/04/OMURGAPOPUP_MAY19-450x281.png" />
</a>
</div>
<div class="hoverImg">
<a href="https://amovenew.druminternet.uk/first-time-buyer/"><img class="round aligncenter" src="https://i.pinimg.com/originals/2e/52/bc/2e52bc9e2b3bb786820fbfb6366dda02.jpg" />
</a>
</div>
</div>
did you try opacity 0 for display none and opacity 1 for display block along with transition property ?
If that does not work you can you animation keyframes for opacity transition.
.imageBox>div {
position: absolute;
left: 0;
top: 0;
transition: opacity 1s;
}
.imageBox:hover .hoverImg {
opacity: 0;
}
<div class="imageBox">
<div class="imageInn">
<a href="https://amovenew.druminternet.uk/first-time-buyer/">
<img class="round aligncenter" src="https://www.isbiryatak.com/wp-content/uploads/2019/04/OMURGAPOPUP_MAY19-450x281.png" />
</a>
</div>
<div class="hoverImg">
<a href="https://amovenew.druminternet.uk/first-time-buyer/">
<img class="round aligncenter" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1054339559,3607230833&fm=26&gp=0.jpg" />
</a>
</div>
</div>
I am building a portfolio site and I want each project's div to have a color change on hover. I've coded it so the background color and text slowly changes when the mouse hovers over the div. However, when the mouse moves away it abruptly changes color back. I would like it to fade back to the original color slowly (rather than abruptly), using CSS if possible.
HTML:
<div class="hacker col-xl-6 col-md-6 mb-4">
<a href="http://text.com/filler/">
<div class="card card-body border-0 shadow">
<img src="img/filler.png" class="card-img-top" alt="Filler">
<div class="card-body text-center">
<h5 class="title1 mb-0">Filler</h5>
<div class="subtitle ">Web Design</div>
</div>
</div>
</a>
</div>
CSS:
.card:hover{
background-color: #12455a;
color: ##fff;
-webkit-transition: background-color .3s;
transition: background-color .3s;
}
.card:hover .title1 {
color: #fff !important;
-webkit-transition: background-color .3s;
transition: background-color .3s; }
.card:hover .subtitle {
color: #fff !important;
-webkit-transition: background-color .3s;
transition: background-color .3s;
}
I expect that when the mouse moves away from the element, the colors will fade back to their original state with the same transition timing as when they fade in, but currently the color changes back abruptly.
You want to apply the transition to .card directly, not the :hover:
.card {
-webkit-transition: background-color .3s;
transition: background-color .3s;
}
.card:hover {
background-color: #12455a;
color: #fff;
}
<div class="hacker col-xl-6 col-md-6 mb-4">
<a href="http://text.com/filler/">
<div class="card card-body border-0 shadow">
<img src="img/filler.png" class="card-img-top" alt="Filler">
<div class="card-body text-center">
<h5 class="title1 mb-0">Filler</h5>
<div class="subtitle ">Web Design</div>
</div>
</div>
</a>
</div>
Also note that you only need to apply it to .card itself, and not the child elements.
As an aside, you don't need to set your color on the child elements, as it will cascade down from the parent .card:hover (though you have a syntax error preventing this from happening in your above code -- I've fixed this up in my example).
I have 2 images which I'm trying to make as my background image. I want those images to fade in and fade out after 2 seconds. At present the change in the background image is happening when I hover over the image. How can I make this change happen automatically, without any hover?
.bground {
width:100%;
position:relative;
background: url(../img/bg1.jpg) no-repeat top center;
-webkit-transition-property: background;
-webkit-transition-duration: 1s;
}
.bground:hover {
background: url(../img/bg2.jpg) no-repeat top center;
}
<section id="bground" class="bground">
<div class="display">
<img src="img/logo.png" alt="Logo">
</div>
<div class="page-scroll">
<a href="#about" class="btn btn-circle" style="color:#000000">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</section>
You can use animation property
I've do this code for you (with some img):
.bground {
width: 200px;
height: 200px;
position:relative;
background: url("http://www.bizreport.com/2011/02/03/android-logo-200x200.jpg") no-repeat top center;
-webkit-animation: 4s linear 0s infinite alternate test;
-o-animation:4s linear 0s infinite alternate test;
animation:4s linear 0s infinite alternate test;
}
#keyframes test {
0% {background-image: url("http://tech21info.com/admin/wp-content/uploads/2013/03/chrome-logo-200x200.png");}
100% {background-image: url(http://www.bizreport.com/2011/02/03/android-logo-200x200.jpg");}
}
<section id="bground" class="bground">
<div class="display">
</div>
<div class="page-scroll">
<a href="#about" class="btn btn-circle" style="color:#000000">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</section>
I am using wordpress with woocommerce to create eshop. Woocommerce has part called mini-cart.php it is actual cart of customer. However I need this cart to be max 60% of height of whole site and I need content of cart to be scrollable. This would be easy but the second thing I need is to exclude buttons and total from scrolling. I have tried many ways but it never works. Here is code I use:
<div class="cart active">
<div class="cart-wrapper">
<h1 class="widget-title"> </h1><div class="widget_shopping_cart_content"><div class="cart-product-list">
<ul class="cart_list product_list_widget ">
<li><a href="http://autoflex.zone42.sk/obchod/2x-stabilizator-predna-naprava-porsche-911-od-09-1997/">
<img src="http://autoflex.zone42.sk/wp-content/uploads/2013/10/2x-stabilizátor-predná-náprava-Porsche-Boxster-od-09.1996-90x90.jpg" class="attachment-shop_thumbnail wp-post-image" alt="2x stabilizátor predná náprava Porsche 911 od: 09.1997" height="90" width="90">
2x stabilizátor predná náprava Porsche 911 od: 09.1997
</a>
<p class="quantity">1 × <span class="amount">50,90€</span></p>
</li>
</ul>
</div><!-- end product list -->
<p class="total"><strong>Medzisúčet:</strong> <span class="amount">50,90€</span></p>
<div class="buttons">
<a href="http://autoflex.zone42.sk/kosik/" class="button">
<div class="cart-buttons">
<div class="cart-buttons-padding">
Zobraziť košík → </div>
</div>
</a>
<a href="http://autoflex.zone42.sk/pokladna/" class="button checkout">
<div class="cart-buttons">
<div class="cart-buttons-padding">
pokladňa → </div>
</div>
</a>
</div>
</div>
and here is CSS:
.cart.active{
max-height: 60%;
margin-bottom: -25px;
transition: max-height .5s .2s;
-ms-transition: max-height .5s .2s;
-moz-transition: max-height .5s .2s;
-webkit-transition: max-height .5s .2s;
}
div.facebook:hover, div.mail-us:hover, div.move-up:hover, div.cart-total.hoverOn:hover{
right: 150px;
}
div.cart-total.hoverOn{
transition: all .5s, width .5s .5s;
}
div.cart-total.hoverOff{
transition: all .5s, width .2s;
right: 150px;
width: 279px;
}
.cart-product-list{
overflow-y: auto;
}
so what should I do if I want only ul (cart_list) scrollable? and I also want the whole div name cart active to be max 60% height of whole site? Thanks in forward
ul.cart_list {
overflow: scroll;
}