I am working on an E commerce application but the theme i am using add to cart button coming on hover effect but i want to make ( Add to cart button) always fixed .
the live working url is as following.
https://www.realfarmer.in/techy-new/shop.php
add to cart will come when cursor is on the product but i want it should come always
You need to remove the styles under
.product-wrap .product-img .product-action-2-wrap {
opacity: 0;
visibility: hidden;
bottom: -20px;
}
Which is hiding the add to cart button if not hovered. Or you can replace the same using
.product-wrap .product-img .product-action-2-wrap {
bottom: 0px;
opacity: 1;
visibility: visible;
}
So this is the code that's working when you hover over the product.
Add this code to your add custom code
.product-action-2-wrap{
visibility: visible;
opacity: 1;
bottom: 0px;
}
this will show add to cart button always visible in the products.
if it is work for you please give a like.
Just remove the background color on Hover using same color like that:
.product-wrap .product-img .product-action-2-wrap:hover .product-action-btn-2 {
background-color: #000;
}
I have an image(class photo) in my webpage and a button(class btn) named "Add to Cart". I want it to work such that when someone hovers over the product image, the "Add to cart" button starts showing over the image while the opacity of the image decreases a bit. I cant quite figure out how to make the button appear when i hover over the image. I am quite new to web development so please help. What do i write in css such that the button is only visible on top of the image when mouse is being hovered over the image.
<div>
<img class="Photo">
<button class= "btn">
<div>
<style>
.btn:hover{
}
<style
In order to connect the image (class="photo") and the button (class="btn") you need some form of container (e.g. a div element with class="container") that contains both.
You can then use the transition css property, to do the smooth switch of opacity:
.btn {
display: none;
}
.container:hover .btn {
display: inline-block;
position: absolute;
}
.container:hover .photo {
opacity: 0.5;
transition: 0.3s;
}
I have a problem that if i skew the button to -15deg. Its tilt like itlaic font style but when the button tilt the text inside the button also got tilt(italic).
I want to know that how is it possible that if the button is tilt(italic) then the text should be in normal font style.
now its showing like this . I want button should be like this but text shouldn't be like this it should be normal.
i follow this answer but this is not working for me. font style should be normal
Is there any problem in my code below:
HTML:
<input id="btn" type="submit" value="BUTTON IS THIS">
CSS:
#btn{
background-color:#29b6f6;
color:#fff;
transform: skewX(-15deg);
font-style:normal;
}
You may add a transformation to a nested element:
HTML:
<button id="btn" type="submit"><span>BUTTON IS THIS</span></button>
CSS:
#btn{
background-color:#29b6f6;
color:#fff;
transform: skewX(-15deg);
}
#btn span {
display: block;
transform: skewX(15deg);
}
When using -webkit-transform: translateX(0%) on a parent container the file name "label" text disappears from the standard <input type="file"> element in Chrome. In Safari the text is also hidden but upon file selection the icon for the file is displayed.
http://jsfiddle.net/9sZxv/
Merely adding and removing a class such as:
.transX
{
-webkit-transform: translateX(0%);
}
To the parent div in:
<div id="test1">
<input type="file">
</div>
Will cause the text No file chosen, or the file name if a file is selected to disappear.
Tested with- Win7: Chrome 19 and Safari 5.1
Is there a fix or workaround? The file select element isn't friendly to CSS styling and there isn't any element to reference just the text part directly so I am at a lost on how to approach this issue.
If you apply a zoom to the input box in Chrome you can see that it is moving the text underneath:
http://jsfiddle.net/9sZxv/4/
This is definitely a hack, but you can move the file input button down to the same level as the text with this css:
.transX input::-webkit-file-upload-button {
-webkit-transform: translateY(26px);
}
And then set the file input to have a negative top to make it look normal.
.transX
{
position: relative;
overflow: hidden;
height: 22px;
-webkit-transform: translateX(20px);
}
.transX input
{
padding-bottom: 26px;
top: -26px;
position: absolute;
}
Here's an example: http://jsfiddle.net/9sZxv/2/
If that doesn't work, you could try making your own file input using the opacity trick described here: http://www.quirksmode.org/dom/inputfile.html
I'm trying to show a simple button, with an image on it, like this:
<button type="button" style="width: 23px; height: 23px; padding:0">
<img src="Icon_304.png" />
</button>
The button looks right in Chrome, but is off a bit in Firefox—it's not horizontally centered, but skewed to the right. A FF screenshot is below. How can I get the image to be centered (like it is in Chrome by default)? I tried adding a margin: 0 to the img, to no avail.
The best way to do this is not to set the dimensions of the button, but to simply rely on padding. Obviously you should put these styles into a style sheet, as shown below.
DEMO: http://jsfiddle.net/QgTkt/4/
.tallButton {
padding: 50px 10px;
}
.wideButton {
padding: 10px 50px;
}
.equalButton {
padding: 10px;
}
<button type="button" class="equalButton">
<img src="http://dummyimage.com/32x32/ff0/000">
</button>
<br /><br /><br />
<button type="button" class="wideButton">
<img src="http://dummyimage.com/32x32/ff0/000">
</button>
<br /><br /><br />
<button type="button" class="tallButton">
<img src="http://dummyimage.com/32x32/ff0/000">
</button>
You can also set absolute position for the image and negative translate, this way you are able to set any size of the button without changing the padding again.
.tallButton{
position:relative;
width:200px;
height:200px;
}
.tallButton img {
position:absolute;
top: 50%;
left:50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
http://jsfiddle.net/QgTkt/292/
Set the image as background image of the button.
<button class="enjoyable"></button>
.enjoyable {
background-image: url("./icon.png");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
Demo: http://jsfiddle.net/x7j4o0uh/1/
I threw this together pretty quickly, so it still needs some tweaking, but you can give this a shot... http://jsfiddle.net/GGXaP/3/
This script (using jQuery) handles the user interaction by adding/removing CSS classes as needed:
(function($) {
$(document).ready(function() {
$('.imageButton').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
$('.imageButton').mousedown(function() {
$(this).addClass('mouseDown');
});
$('.imageButton').mouseup(function() {
$(this).removeClass('mouseDown');
});
});
}(jQuery));
Then it's just a matter of setting up CSS to make the button look the way you like. The one in my example is pretty rough (I'm a "make it work" guy - not a "make it pretty" guy), but it's a start.
To solve this issue on Chrome I just added align-items : center on my button.
By default Chrome sets align-items : flex-start on all buttons, which aligns all elements inside the button on the left side, by overloading this property the picture inside my button is now centered.
Instead of giving height or width to button or image give padding to button so it will align that image to center
<button type="button" style="padding:10px">
<img src="test/images/searchIcon.png">
</button>
button {
display: grid;
align-items: center;
}
Inspiration: [1]