I want an Image to disappear and another to appear at the same place with same size on hover. Therefor I hide the orignal image and create a background image instead. The problem: The background image does not auto scale. If I dont set a specific height it has no height (means no image visible).
You can see the problem here if you scroll down a bit: https://www.ergotopia.de/
My current CSS:
.bestsellerkissen:hover .hoverkissen{
background: url(example.jpg) no-repeat center;
height: 240px;
background-size: 100% 100%;
display: block;
border-radius: 4px 4px 0 0;
}
.bestsellerkissen:hover img{display:none;}
Use opacity instead of display on image. Then you don't need to set height:
.bestsellerkissen:hover .hoverkissen{
background: url(example.jpg) no-repeat center;
background-size: 100% 100%;
display: block;
border-radius: 4px 4px 0 0;
}
.bestsellerkissen:hover img{
opacity: 0;
}
Related
In CSS, I am looking for a way to add space between an svg and the div element containing it.
Now, the svg is included in the background attribute with no-repeat, which causes it to appear cramped inside of the div container.
Is there a trick or workaround to uniformly add space so that there is padding between the svg and the container?
#rack-button {
position: absolute;
background: url('simple_rack.svg') no-repeat top left;
background-size: contain;
display: inline-block;
background-color:white;
width: 34px;
height: 34px;
left: 10%;
border-radius: 5px;
border-width: 2px;
border-color: #B8B8B8;
}
I have a web page which I'd like to set full screen image right when users enter the page. I don't want it to be fixed or anything. Just at the size of the window.
Now, I also have a footer which is positioned absolutely at the bottom of the web page. Here is the styles for the footer:
html {
height: 100%;
box-sizing: border-box;
}
body {
position: relative;
margin: 0;
min-height: 100%;
padding-bottom: 80px;
color: white;
background: white;
font-family: "Quicksand";
fill: currentColor;
}
/* Footer Section */
footer {
display: flex;
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 80px;
align-items: center;
justify-content: center;
background-color: $accent-color;
color: #fff;
}
Now, when I try to set my full screen image like this:
.fullscreen-bg {
height: 100%;
background-image: url("/assets/images/scorpion.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
The image doesn't show at all, but when I change min-height: 100% to height: 100%, The image suddenly shows up, but the footer now is at the bottom of the viewport, not the page. Here is an image that will explain this perfectly:
https://i.gyazo.com/d47e2e1fcdeaf4f8f8cab8b847c00f43.png
As you can see, the footer now jumps up and resides at the bottom of the screen.
If I change this attribute back to min-height: 100%, the image doesn't show at all:
https://i.gyazo.com/b3d8b941222ac16455d220f25da8bfbf.png
How can I fix this? I want the image to be full screen but also I don't want the footer to jump up from the bottom of the page. How can I combine these 2 behaviors?
Use height: 100vh; it will cover 100% height for all screen sizes.
I have to fix a blue colored 'lock' image to the outside of the container like below:
So far I have achieved this below:
I am setting this image as background-image of the container and the CSS for the container I wrote is:
.container{
margin: 0 auto;
max-width: 620px;
background-color: $white;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
object-fit: contain;
margin-top: 30px;
padding: 40px;
min-height: 100px;
object-fit: contain;
overflow: hidden;
border-radius: 5px;
background-repeat: no-repeat;
background-image: url("../lock.svg");
}
<body>
<div class="container">
</div>
</body>
</html>
If I give background-position, the image is hiding behind the container, like this
Please advice how to achieve this? Is my approach correct?
If you want to set your lock button depending on the container, you have to set a relative position to the container and an absolute position to the button.
Then you set top and right property to the button depending on the container.
.container {
position: relative;
}
.button {
position: absolute;
top: some px;
right: some px;
}
UPDATE
Here is a jsFiddle with the image and hover event.
I have a sprite image containing 4 "button" images each 30px x 60px - so the total image size is 60px x 120px. Each button is displayed using its proper background offset in the css as shown below.
I want to increase the clickable area of each button, but if I increase padding for the image, more of the image will show than contained in the defined width and height. Can I increase padding or use some other method where the image is still constrained to the amount in height and width?
I do have a containing a tag. I am able to increase the clicking area of the buttons by padding the a tag, but I still need to give feedback via the img hover that the mouse is in the clickable area.
img.prev{
background:url(../img/buttons.gif) no-repeat 0px 0px scroll;
width: 30px;
height: 60px;
}
img.prev:hover{
background-position: 0px -60px;
}
img.next{
background:url(../img/buttons.gif) no-repeat -30px 0px scroll;
width: 30px;
height: 60px;
}
img.next:hover{
background-position: -30px -60px;
}
OK - I think I've got an answer. It seems I can increase the padding of the containing a tag to increase the clicking area and then use the hover event of the a tag to set the background for the img. The following css is for the containing a tags.
Please let me know if there is a better or another solution.
#a-next{
padding-left: 30px;
padding-bottom: 200px;
}
#a-prev{
padding-right: 30px;
padding-bottom: 200px;
}
#a-next:hover > img{
background-position: -30px -60px;
}
#a-prev:hover > img{
background-position: 0px -60px;
}
the pseudo will do . https://jsfiddle.net/mgggf5vo/6/
catch hover from the link, so it includes the pseudo area.
Te correct attribute for links is title, not alt.
a {
display: inline-block;
position: relative;
vertical-align: middle;
cursor:pointer;/* href is missing */
}
a:before {/* give it any size */
content: '';
position: absolute;
height: 60px;
width: 50px;
margin-left: 29px;
}
a[title="next"]:before {
right: 29px;
}
img.prev {
background: url(http://www.waldorfteacherresources.com/img/slideshow-buttons-large.gif) no-repeat 0px 0px scroll;
width: 30px;
height: 60px;
padding: 0;
}
a:hover img.prev {
background-position: 0px -60px;
}
img.next {
background: url(http://www.waldorfteacherresources.com/img/slideshow-buttons-large.gif) no-repeat -30px 0px scroll;
width: 30px;
height: 60px;
padding: 0;
}
a:hover img.next {
background-position: -30px -60px;
}
<div>
<a title="prev">
<img src="http://www.waldorfteacherresources.com/img/blank.gif" alt="prev" class="prev">
</a>
Something Here
<a title="next">
<img src="http://www.waldorfteacherresources.com/img/blank.gif" alt="next" class="next">
</a>
</div>
I am trying to make a div look like a white glowing circle with no edges. The css is achieved with:
body {
background: #000;
}
div {
border-radius: 50%;
/* makes the div background circular */
background: white;
height: 275px;
width: 275px;
box-shadow: 0px 0px 220px 279px #fff;
/* creates glow effect */
}
<div></div>
When there is a problem it looks like this:
The problem is that on some screens, there is a line separating the circle from the glow. I am trying to achieve a seamless glow without the circle. I have tried filter:blur but this is not an option since it blurs the logo image nested inside the div.
The problem is on the landing page of this site.
The buggy rendering in Chrome seems to be caused by the blur-radius and is hidden by the spread-radius; it seems to only occur with large blur-radius values. Through trial and error you can use the spread-radius to cover up the bug.
It's not perfect, but this works:
box-shadow: 0px 0px 140px 300px #FFF;
These are the changes that work on your site. Place the border radius and box shadow on the outer div to eliminate a gray ring.
#logo-outer {
margin: 10px auto;
width: 275px; /* increase width to match #logo */
background: none repeat scroll 0% 0% #FFF;
border-radius: 50%;
box-shadow: 0px 0px 140px 300px #FFF; /* change the box shadow blur and spread */
}
#logo {
height: 275px;
width: 275px;
background: none repeat scroll 0% 0% #FFF;
}
This is what it looks like in Chrome
Bug Workaround Example
body {
background: #000;
}
div {
border-radius: 50%;
height: 250px;
width: 250px;
box-shadow: 0 0 140px 300px #fff;
background: #FFF;
}
<div></div>