I have some trouble with image hover idea on my website. Currently, my website is on local server, so I can not share the link. But I hope to explain correct.
I use twenty thirteen theme, woocommerce plugin and my task is to make pixel perfect custom design. So, I started with child theme creation and custom css.
My problem is to make add to cart button be visible only on product`s image hover. My current css for cart is:
form.cart {
margin-bottom: 0;
position: absolute;
top: 30px;
margin: 0 auto;
left: 0;
right: 0;
}
.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
background-color: transparent;
color: #fff;
border: 1px solid #fff;
border-radius: 0;
font-size: 12px;
display: none;
}
Here is the needed result:
I can not fix the visibility of it only on products image hover.
I can overwrite everything needed. Thank you for help.
Without knowing the structure of your HTML I cannot guarantee this will work, but something like:
.add-to-cart-button{
display: none;
}
.product-image:hover .add-to-cart-button{
display: block;
}
This will only work if your add to cart button is a child of product image or a child of a sibling of product image.
For smooth transition, this is really great. (Display block / none is very rapid)
.img-container {
position: relative;
overflow: hidden;
/* this will hide the overflow that will be happening in translate(100%,100%)*/
}
.cart-btn {
transition: all 1s ease-in-out;
transform: translate(100%, 100%);
/* this will put the element away from the cart */
}
.img-container:hover .cart-btn {
transform: translate(0, 0);
/* when hover, now the element is shown in their original position */
}
Related
I am using a website template on Cargo Collective. On the Home page, there is a grid of images with text that only appears on hover. In Mobile view, the text does not appear. I understand hover doesn't work consistently on mobile devices. Is there a way to set this text to appear when the page loads on mobile?
Alternatively, how would I remove the hover functionality and have the text always visible?
Here are the two spots where hover appears in the CSS:
[data-predefined-style="true"] bodycopy a:hover {
}
bodycopy a.image-link,
bodycopy a.icon-link,
bodycopy a.image-link:hover,
bodycopy a.icon-link:hover {
border-bottom: 0;
padding-bottom: 0;
}
/**
* Thumbnail Hover
*/
.thumbnails .thumbnail > a {
position: relative;
}
.thumbnails .thumbnail .title {
background: rgba(0, 0, 0, 0.4);
padding: 0.5rem 1.2rem 0.7rem 1.2rem;
margin: 2.4rem;
color: rgba(255, 255, 255, 1);
align-content: center;
display: flex;
position: absolute;
left: 0;
top: 0;
z-index: 9;
opacity: 0;
}
.thumbnails .title span {
margin: auto;
display: inline-block;
}
.thumbnails .thumbnail:hover .title {
opacity: 1;
}
body.mobile .thumbnails .thumbnail:hover .title {
opacity: 0;
}
Out if this part we can make something up.
body.mobile .thumbnails .thumbnail:hover .title {
opacity: 0;
}
What if we removed the .thumnails:hover and changed the opacity to 1? it might do the trick.
body.mobile .thumbnails .title {
opacity: 1;
}
I hope this works but I have no Idea about Cargo Collective. Just using css knowledge.
I recommend to you to learn some css basics. This will help you to solve problem like this in the future.
Here's a small example showing how you could hide and display text depending on the width of the viewport using media queries. A similar method can be applied to your problem by only setting the :hover properties when the screen has a given minimum width.
Also note, that that device-width has been depreciated and removed from Web standards. So be careful when choosing your media query.
/* General styles */
p {
transition: opacity 0.3s;
}
/* Small styles */
.large {
opacity: 0;
}
.small {
opacity: 1;
}
/* Large styles */
#media only screen and (min-width: 640px) {
.large {
opacity: 1;
}
.small {
opacity: 0;
}
}
<p class="large">I'm visible when the screen is large!</p>
<p class="small">I'm visible when the screen is small!</p>
I should also mention that this is by no means a perfect solution. If you want to be more accurate, I would recommend using Javascript to detect the device type and modify your classes via Javascript.
I've been racking my head over this seemingly little thing for a while but I'm at my wits end. I'm running a free Customizr theme on my site.
What I am trying to achieve is to have the hover effect in the navigation bar like this demo here. As you can see, only the text of the dropdown menu items are nicely underlined.
I've found and tried to use this CSS code here:
.sliding-middle a {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.sliding-middle a:after {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width .3s ease, background-color .3s ease;
}
.sliding-middle a:hover:after {
width: 100%;
background: #08c;
}
However, the result I got as you can see here, the dropdown menu items are underlined all the way across. I found that if I didn't target the "a" tags, the line would appear even more weirdly on the main menu items. But by doing so, the whole submenus inherit this effect.
If anyone has any idea what I'm missing, please help me out. Thank you in advance!
The example you want to achieve uses two span-nodes inside the a and only targets the first one (adding a pseudo :before) with this CSS
.header-skin-light [class*=nav__menu] li>a>span:first-of-type:hover::before {
background-color: #313131;
visibility: visible;
-webkit-transform: translate3d(0,0,0) scaleX(1);
-moz-transform: translate3d(0,0,0) scaleX(1);
transform: translate3d(0,0,0) scaleX(1);
}
If you add a span for the link text, you should get pretty much the same result.
Alright! After a few days of stressing it out and breaking my site, I've finally sort-of solved this issue.
Firstly, as #janh2 mentioned, you need to get the page to add span tags to the navigation menu labels. I've asked a different question and have updated it with the answer.
Next it's simply using the following to get the result:
.sliding-middle span {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.sliding-middle span:after {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width .3s ease, background-color .3s ease;
}
.sliding-middle span:hover:after {
width: 100%;
background: black; /*colour you want your line to be*/
I hope this helps guys.
I have a div called main content, inside this div is another div called slideup. Using CSS animation, when you hover over the main content div, the slide up div slides up from the bottom to 50% height. This can be seen in my css code below
.maincontentdiv {
position: relative;
height: 100px;
width: 100%;
}
.slideup {
position: absolute;
width: 100%;
bottom: -2px;
min-height: 0;
color: #FFF;
transition: min-height 250ms ease-in;
background-color: #666666;
text-align: center;
height:20px;
}
.maincontentdiv:active > .slideup, .maincontentdiv:hover > .slideup {
min-height: 50%;
}
The hover works perfectly well, however I included the click function (.active) for touchscreen devices. I can not seem to get the click function working. Could somebody please tell me what I have done wrong?
Thanks
Hi I was wondering if anyone could help me with this. At the moment I have a Nivo Slider, with a Nivo Caption set to display: none; at a certain screen size. It has come to me attention that for some people, seems like iPhones, the caption displays, and creates a white space to the right (too big for the current size), until refreshed. Is there a better way to 'get rid' of an element for mobile?
Thanks.
Al.
You're overwriting a CSS rule.
At some point on the Stylesheet you have:
.theme-light .nivo-caption {
display: none;
}
A bit further:
.nivo-caption {
-moz-box-sizing: border-box;
background: none repeat scroll 0 0 #000000;
bottom: 10%;
color: #FFFFFF;
display: block;
height: 66px;
left: 0;
opacity: 0.9;
overflow: hidden;
padding: 5px 10px;
position: absolute;
width: 440px;
z-index: 8;
}
display: none;
and then
display: block;
I would go for a jQuery approach to get rid of the caption, based on the screen size or even detecting if it's a smartphone (modernizr).
in the jquery.nivo.slider.js
add:
//Process caption
if ($(window).width() < 659) {
$('.nivo-caption').hide();
}
else {
processCaption(settings);
}
I would really like to stop the menu items jumping around on this site as the parent item expands to fit its child.
I can get it looking how I want when I add this CSS, forcing the menu items to have fixed widths:
/*Menu item 1*/
#menu-item-117 .sub-menu {right: -125px;}
/*Menu item 2*/
#menu-item-73 {width:45px;}
#menu-item-73 .sub-menu {width:980px!important;right: -10px;}
/*Menu item 3*/
#menu-item-122 {width:65px;}
#menu-item-122 .sub-menu{width:980px!important;right: 165px;}
However, this is clearly not ideal, as the menu needs to be dynamic...
Is there a way to achieve what I want via CSS? I hope so!
I am using the Superfish menu that comes with Theme Hybrid for Wordpress.
Thanks in advance for any help you can offer!
I get your point .. let's see again.
This build uses position: relative/absolute; instead of float: right/left; and it has one flaw mentioned below.
However I haven't test this in old browsers including IE (tested in Chrome & Firefox), but I hope this may provide you some idea to implement it. :)
#primary-menu .menu /* new rule */ {
position: relative;
height: 50px; /* The flaw is you have to fix the menu's height here */
}
#primary-menu ul {
position: absolute;
right: 0;
top: 0;
}
#primary-menu li {
float: left;
list-style: none outside none;
margin-left: 10px;
position: relative;
}
.sub-menu {
background: none repeat scroll 0 0 #244563;
clear: both;
display: none;
font-size: 0.8em;
overflow: visible;
padding: 5px 0 !important;
position: relative;
right: 0;
text-align: right;
top: 30px !important;
width: 700px !important;
}
.sub-menu li {
display: inline !important;
float: none !important;
padding: 10px 0 !important;
width: auto !important;
}