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;
}
Related
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 some code like this
<div ng-click="showMore = true">show more</div>
<div class="show-more' ng-show="showMore">
<div class="cell">
//some span
</div>
<div class="cell">
//some div
</div>
<div ng-click="showMore = false">show less</div>
</div>
and when user clicks 'show more', I want to show the rest in animation
in my css
.cell {
padding-top: 20px;
padding-bottom: 15px;
height: 110px;
}
I have to get rid of ng-show or ng-hide, because display:block or display:none would not make transition: height 0.5s linear; work. So I tried to set the height of .cell to be 0 when it is collapsed, and set it as 110px when it is expanded, but cell height is not really 0 when it is collapsed, because it contains <span> or <div> which have height and padding
how to animate the expand/collapse process in my case? thanks in advance
var app = angular.module("myApp", []);
// Create a Controller named "myCtrl"
app.controller("myCtrl", function($scope) {
showMore = false;
});
.show-more {
-webkit-transition: max-height 1s;
-moz-transition: max-height 1s;
-ms-transition: max-height 1s;
-o-transition: max-height 1s;
transition: max-height 1s;
background: #e5feff;
overflow: hidden;
max-height: 0;
}
.show-more.show {
max-height: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="show-more" ng-class="{'show': showMore}">
<div class="cell">
//some span
</div>
<div class="cell">
//some div
</div>
</div>
<button type="button" ng-click="showMore = !showMore">
Show {{ showMore ? 'Less' : 'More' }} ...
</button>
</div>
Why you trying this in scripting way? Why don't you use Bootstrap Collapse class, Its all going to come with inbuilt Animations
for my site I have finally created a load more option, with a clickable image that when clicked loads the next posts.
However, I want to add an effect to the image so when one hovers over the "plus" spins. Since the link area is above the image the "plus" no longer spins.
Any thoughts on how to resolve this without potentially breaking the plugin, behind this load more function in wordpress ?
a.load_more { border-radius: 70%; height:26%; width:15%; position: absolute; top:3%; left:1.5%; display:block; background:rgba(0,255,0,0.5);}
img.plus{
-webkit-transition: -webkit-transform .8s ease-in-out;
-ms-transition: -ms-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
z-index:999
}
img.plus:hover{
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}
<div id="content">
<div id="block">
<div>
<img class="plus" src="http://www.hellodolly.be/wp-content/uploads/2016/10/plus.png"/>
</div>
</div>
</div><!--/content-->
fiddle
you can put the link around the image so the image is the link you dont even need a class for the href then.
example:
<div id="content">
<div id="block">
<div>
<a href="#" class="load_more">
<img class="plus" src="http://www.hellodolly.be/wp-content/uploads/2016/10/plus.png"/>
</a>
</div>
</div>
</div><!--/content-->
I hope that i have understand you're question correct and that this will help you.
try to add "visibility: hidden"
.load_more {
border-radius: 70%;
height:29%;
width:11%;
position: absolute;
top:3%; left:1.2%;
display:block;
background:rgba(0,255,0,0.5);
visibility: hidden;
}
Just change your markup into like this. Wrap the image by anchor.
img.plus{
-webkit-transition: -webkit-transform .8s ease-in-out;
-ms-transition: -ms-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
z-index:999
}
img.plus:hover{
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}
<div id="content">
<div id="block">
<div>
<img class="plus" src="http://www.hellodolly.be/wp-content/uploads/2016/10/plus.png"/>
</div>
</div>
</div><!--/content-->
Hope it helps. Cheers
I was wondering if I can tranform an object A when I´m hovering a sibling B (only with CSS if possible). This is my code:
<div id="block-1">
<a href="whatever.hml">
<img class="imgZoom" src="image.jpg" height="300">
<div style="height: 86px;" class="caption"> </div>
<div class="caption-text">
<h3>Header</h3>
<h4>subheader</h4>
</div>
</a>
</div>
.imgZoom is just this:
.imgZoom {
-webkit-transition: all 0.4s ease; /* Safari and Chrome */
-moz-transition: all 0.4s ease; /* Firefox */
-ms-transition: all 0.4s ease; /* IE 9 */
-o-transition: all 0.4s ease; /* Opera */
transition: all 0.4s ease;
}
I want to hover .caption-text and apply a transform to imgZoom (scale), I guess this is absolutely possible but well, I´m not being able to do it. Can anyone help me or at least tell me if is possible? Thanks.
you can do this as was mentioned in comments .caption-text:hover + .imgZoom {}
but you have to move img right ater element you want to hover
<div id="block-1">
<a href="whatever.hml">
<div style="height: 86px;" class="caption"> </div>
<div class="caption-text">
<h3>Header</h3>
<h4>subheader</h4>
</div>
<img class="imgZoom" src="image.jpg" height="300">
</a>
</div>
if you need element in order you stated, you need use javascript
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;
}