I have this image that I want to display on top of my product images when you HOVER on them.
This is what i'm using:
.centerBoxContentsFeatured img:hover {
background-image:url('http://i47.tinypic.com/vz2oj.gif');
}
It does work but it's being display behind the product image instead of on top of it. I tried absolute positioning and z-index but nothing seems to work.
http://www.pazzle.co.uk - trying to apply on the images on the main page. <<
EDIT:
#featuredProducts.centerBoxWrapper {
position: relative;
}
#featuredProducts.centerBoxWrapper:hover:before {
content: '';
width: 187px;
height: 179px;;
position: absolute;
top: 0;
left: 0;
background-image:url('http://i47.tinypic.com/vz2oj.gif');
}
a {
display: block;
position: relative;
width: 100px;
height: 100px;
}
a:hover:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-image:url('http://i47.tinypic.com/vz2oj.gif');
}
Demo
Use a pseudo element.
It's doing exactly what it's supposed to do. It's a background, so it will appear behind the container's content.
What you have to do here is to overlay a div over the image you're hovering.
I think this is possible a with a pure CSS solution, but it might be easier with some JavaScript.
See this question: on hover overlay image in CSS
Related
I have a stackblitz here
This should be the simplest thing but I can't see why its not working.
I have react app with Typescript and a styled components, I'm sure none of that is the problem this is just css.
I'm trying to position two divs on top of each other.
The container has position: relative;
And then the div are absolutely positioned.
.FlexContainerColOne,
.FlexContainerColTwo{
position: absolute;
top: 0;
left: 0;
}
But both div disappear, what am I missing
From what I am seeing here is that they are not disappearing, you just can't see them because they don't have a width assigned or content. See the following, I added width, and opacity to show the two divs merging over each other.
stackblitz snippet
Result:
flexcontainer {
position: relative;
}
.FlexContainerColOne,
.FlexContainerColTwo {
position: absolute;
top: 0;
left: 0;
}
.FlexContainerColOne {
background: red;
height: 500px;
width: 500px;
opacity: 0.5;
}
.FlexContainerColTwo {
background: green;
height: 500px;
width: 500px;
opacity: 0.3;
}
<flexcontainer>
<div class="FlexContainerColOne"></div>
<div class="FlexContainerColTwo"></div>
</flexcontainer>
change the position of ‘activate deal’ button like ‘show coupon’ button.
i am using this code for the position of ‘show coupon’ button.
div.folding-button {
position: relative;
left: 610px;
Bottom: 150px;
}
i have tried to change the position of ‘activate deal’ button by using the code :
a.deal-button.activate-button.activate-modal {
position: relative;
left: 610px;
Bottom: 150px;
}
but the ‘show coupon’ button got distorted and ‘activate deal’ button is not clickable
Thanks. help is aprreciated
I have reviewed your code and your problem is that you have only one HTML class for button and 1 main class it there is a coupon in it. If you sort there 2 buttons with 2 different classes and put them into a div of right content you could find a better solution than with css.
Anyway I have done some css research on your website and I have found this solution with css. Try following code bellow and make it responsive for each screen to make it work great. I have tested it with 1920px width screen and it works great.
a.deal-button.show-coupon-button.activate-button.activate-modal{
position: relative;
left: 38rem;
top: -10rem;
}
a.deal-button.activate-button.activate-modal {
display: block;
position: relative;
left: 38rem;
top: -10rem;
z-index: 2;
}
.code-button-bg {
position: relative;
left: 38rem;
top: -12.5rem;
background: #a41913;
}
To prevent title shows behind the button put this into your css
h2.title.front-view-title {
width: 75%!important;
}
Dont know what to call it but I want a border that doesnt follow the divs height:100%; but is centered between top and bottom of the parent div.
What is the best solution? creating another div that contains the border? or is there any options in css that I dont know off?
heres a codepen to my current footer with the divs im using:
http://codepen.io/Volcan3/pen/yVoNZB
You could use pseudo classes to mimic a border that doesn't cover "100%"...
http://codepen.io/anon/pen/yVoORm
.footer-item::after {
content: '';
display: block;
height: 80px;
width: 1px;
background-color: red;
position: absolute;
right: 0;
top: 50%;
margin-top: -40px;
}
and then don't forget to make the parent item relative and a block:
.footer-item {
display:block;
height: 100%;
position: relative;
}
I have a template i need to override.My div is centered in the middle and as my design uses a fullwidth ribbon i used :before and :after to create the effect.it worked now on top of that ribbon i need to have an image displayed on top of it.it works for the main div but for the pseudo elements i cant get it to work.
.backbox:before
{
content: '';
display: block;
width: 5000px;
height: 400px;
background-color: gray;
background-image:url(/wp-content/uploads/2014/08/buildings.png) ;
background-position:bottom;
background-repeat: no-repeat;
top:0px;
background-repeat: no-repeat;
position: absolute;
left: -4985px;
z-index: 5;
}
.backbox:after
{
content: '';
display: block;
width: 5000px;
height: 400px;
background-color: gray;
background-image:url(/wp-content/uploads/2014/08/buildings.png) ;
background-position:bottom;
background-repeat: no-repeat;
position: absolute;
right: -4985px;
z-index:5;
}
Edit:
As you requested here is an image of what the web page should actually look like
Can't you use z-index for this?
So put make a div surrounding both the ribbon and the image you want to put on top of it. Then make the ribbon a z-index: 1; and the image and z-index: 2;
I have a totally simple layout, in the page is only a silver background and the red DIV, as is possible to see on the image below. My problem is, that when I add the red DIV into my layout page, the page is longer on the length than 100% (bottom on the right corner - slider). Where could be a problem that caused this?
The CSS properties of the red DIV are:
html, body {
background-color: silver;
margin: 0;
padding: 0;
}
.red-div {
overflow: hidden;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.red-div {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
right:0; /* This is what you need */
}
That way, you can force it to go to the end of the browser. When you do 100%, you do not account for the scrollbars. Which add the extra space and thus the annoying side-scroll