This question already has answers here:
Can I have multiple background images using CSS?
(8 answers)
How to overlay images
(11 answers)
Closed 1 year ago.
I want to make one image as a background for another (it will be the same image). This is going to work only on mobile version of site. I was trying different combinations of positions and displays, but it doesn't work and this is as far as I could get:
This is how my Vue code looks like:
<div class="img-big">
<img
v-if="productCard.file"
:src="`${productCard.file}`"
:alt="productCard.altText || productCard.text"
class="blur-background-img"
>
<img
v-if="productCard.file"
:src="
`${productCard.file}`
"
:alt="productCard.altText || productCard.text"
/>
</div>
And this is scss code:
.img-big {
img {
display: block;
margin: 0px auto;
#media only screen and (max-width: 420px) {
z-index: 2;
width: 70%;
top: 0;
}
}
.blur-background-img {
z-index: 1;
filter: blur(8px);
margin: 0;
width: 100%;
}
}
The only thing that I know works correctly is z-index, but I need to put one image (not blurred) on another (blurred, as a background)
Use position: relative for blurred image and position: absolute for another one so that it can be positioned relative to blurred one .
#outerCircle {
position: relative;
width: 42vw;
height: 42vw;
margin: auto;
border-radius: 50%;
border: 4px solid rgb(255, 62, 62);
background-color: rgb(253, 133, 133);
user-select: none;
}
#styleCircle {
position: absolute;
width: 16vw;
height: 16vw;
text-align: center;
padding: 0%;
top: 10%;
/*Used to reposition*/
left: 10%;
/*Used to reposition*/
border-radius: 50%;
border: 3px solid black;
background-color: rgb(255, 233, 35);
}
<div id="outerCircle">
<div id="styleCircle"></div>
</div>
Related
I have a usual search as most websites do. The results are shown below on the div that is visually connected to the search input.
It looks like this:
I need to have one solid shadow for the div parent but can't figure out or find online the way to do this.
I thought that I could either make 2 separate shadows, but that will look inconsistent and just terrible. Or I could make a div below with the same height and width that will act as a shadow but that's a non-necessary complication + the .search-results div's height will change dynamically.
This is an example:
body {
background-color: gray;
}
.search-wrapper {
position: relative;
margin: 100px 100px 0px 100px;
width: 200px;
overflow: initial;
box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.3);
}
.search {
width: 200px;
height: 30px;
color: white;
border-radius: 4px;
} .search input {
padding: 0;
background-color: #022222;
border: none;
height: 100%;
width: 100%;
color: white;
}
.search-results {
position: absolute;
height: 150px;
width: 200px;
background-color: black;
}
<div class="search-wrapper">
<div class="search">
<input placeholder="air max . . .">
</div>
<div class="search-results">
</div>
</div>
I am sure there must be a clever and simple way to do this.
Please help,
Thank you
You don't need to use positions here and you can use FlexBox instead. It's the best way and a lot easier. Also, you can ignore all of them, they will place on top of each other because they are block-level tags/elements. (divs)
You don't need to put the input in another div parent, use it as I did.
Sorry, I couldn't understand your code, so I must write the whole code from the beginning.
EDIT
I removed display flex, cause it's not necessary.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: Arial;
border-radius: 10px;
background-color: #fff
}
body {
height: 100vh;
background-color: gray;
padding: 30px
}
.search-wrapper {
/* EDITED HERE ADDED HEIGHT */
position: relative;
z-index: 999;
width: 200px;
height: 160px;
box-shadow: 0 0 2px 5px rgba(232, 232, 232, .2)
}
.search-input {
width: 100%;
position: absolute;
padding-block: 5px;
border: none;
outline: none;
padding: 15px
}
.search-result {
/* EDITED HERE */
position: absolute;
z-index: 999;
bottom: 0;
width: 100%;
padding: .5px
}
p {
padding: 10px 0 10px 10px;
}
p:hover {
background-color: #e8e8e8;
cursor: pointer
}
<div class='search-wrapper'>
<input class='search-input' placeholder='Search...'>
<div class='search-result'>
<p>Nike Airforce</p>
<p>Nike Airforce</p>
<p>Nike Airforce</p>
</div>
</div>
Here's my issue:
I have a mockup from a design company that wants a text block with a 'broken' square border behind some big text that looks like this (description: there is a small white frame behind large text that is broken up by the text, and then a smaller text link below):
Image of an element on client's website,
In the design, the text is displayed accross the white square frame. The way I have implemented it right now is to make the big text's background color gray. Because the current image's background is gray the desired effect is achieved.
What is needed is to achieve that effect (of breaking the white frame) REGARDLESS of the appearance of the image. Because right now, this happens:
the gray background of the text appears like a box in front of the image -- it ought to be transparent
To further illustrate, if I set the background-color of the big text to transparent, the whole frame is shown (the desired effect is a broken frame):
background: transparent #1
More info if it helps:
The white frame element is just a div with a white border.
I am not sure exactly what to search for in this case, if there is an appropriate CSS solution (preferrable) or if I need to use SVG or maybe a PNG? Thank you for any help.
As #Temani Afif pointed out in the comments, it's not one box, but two separate shapes in CSS.
I made an example to illustrate this using flexbox.
.page {
background-color: black;
width: 400px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.box-top {
width: 100px;
height: 10px;
border-color: white;
border-width: 2px;
border-style: solid;
border-bottom: none;
}
.box-bottom {
width: 100px;
height: 30px;
border-color: white;
border-width: 2px;
border-style: solid;
border-top: none;
}
.separator {
color: white;
width: 100%;
margin: 5px 0;
padding: 0;
font-size: 40px;
text-align: center;
}
<div class="page">
<div class="box-top"></div>
<p class="separator">
Headline
</p>
<div class="box-bottom"></div>
</div>
You can make a square element with a border and use a mask on it:
body {
margin: 0;
min-height: 100vh;
background: black;
box-sizing: border-box;
padding-top: 1px;
}
h2.fancy {
position: relative;
text-align: center;
color: white;
padding-top: 12px;
}
h2.fancy:before {
content: '';
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
width: 100px;
height: 100px;
border: 5px solid white;
clip-path: polygon(0 0, 100% 0, 100% 10px, 0 10px, 0 40px, 100% 40px, 100% 100%, 0 100%);
}
<h2 class=fancy>I'm a fancy title...</h2>
The advantage of this solution is that you can make it scale easily with what might change on various screen sizes. For example, with the title's font-size:
document.querySelector('input.font-size').addEventListener('input', function(e) {
document.querySelector('h2').style.fontSize = e.target.value + 'px';
})
body {
margin: 0;
min-height: 100vh;
background: url(https://picsum.photos/800) center /cover;
box-sizing: border-box;
padding-top: 1px;
}
.overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
}
h2.fancy {
z-index: 1;
position: relative;
text-align: center;
color: white;
padding-top: 12px;
}
h2.fancy:before {
content: '';
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
width: 100px;
height: 100px;
display: block;
border: 5px solid white;
clip-path: polygon(0 0, 100% 0, 100% 10px, 0 10px, 0 calc(10px + 1.3em), 100% calc(10px + 1.3em), 100% 100%, 0 100%);
}
input[type=range] {
position: absolute;
bottom: 1rem;
left: 1rem;
z-index: 1;
}
<h2 class=fancy>I'm a fancy title...</h2>
<div class=overlay></div>
<input type=range min=12 max=36 class=font-size>
The disadvantage is that it doesn't work in IE or Edge lower than 18 or in Opera mini. This particular example works in IE 18, though, as it only uses polygon().
I'm using Bootstrap 4 for a custom wordpress theme. I've readed this short article where is explained how to create an animated underline on hover. On desktop all works fine but on mobile the underline will take the 100% of the width under the menu elements. Is possible to fix?
here is the css code I'm using:
.top{
position: relative;
color: black;
}
.top:hover{
color: rgb(28,67,63);
}
.top:hover:after{
width: 100%;
}
.top:after{
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0%;
border-bottom: 2px solid rgb(28,67,63);
transition: 0.4s;
}
To be more clear here is an image of the problem that is happening
mobile underline
I've solved using the inline-block display property on mobile.
.top{
display: inline-block;
}
First Try to arrange your CSS code, .top:hover::after must come after .top::after,
also, the trick that on mobile the element take the full width, so try to give the element specific width on mobile screens.
Try this code, it's work fine.
<div class="top">
Hi
</div>
.top{
position: relative;
color: black;
width: 50px;
}
.top::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0%;
border-bottom: 2px solid rgb(28, 67, 63);
transition: 0.4s;
}
.top:hover{
color: rgb(28, 67, 63);
}
.top:hover::after{
width: 100%;
}
This question already has answers here:
Hover and click on CSS triangle
(4 answers)
Closed 7 years ago.
I am in quite the quandary! I would like to add cursor: pointer to my CSS, but the problem is it is a triangle. If I used the following:
#triangleholder {
width: 100px;
height: 100px;
border: 1px solid red;
}
#triangle {
width: 0;
height: 0;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
border-bottom: 50px solid blue;
cursor: pointer;
}
<div id="triangleholder">
<div id="triangle">
</div>
</div>
The whole triangle and everything around it has the "Cursor" affect, how can I make only the triangle have the hover affect?
This can be done with pure CSS if we construct the triangle using transforms and overflow:hidden
FIDDLE
#triangleholder {
width: 100px;
height: 100px;
border: 1px solid red;
}
#triangle {
position: relative;
height: 50px;
overflow: hidden;
}
#triangle:before {
content: '';
position: absolute;
width: 71px; /*using pythagorus: sqrt( (100^2) /2 ) */
height: 71px;
background: blue;
transform: rotate(45deg)translateX(29%);
cursor: pointer;
}
<div id="triangleholder">
<div id="triangle">
</div>
</div>
NB: The code: translateX(29%) is used to place the rotated blue square back into the center of the container after it is rotated. This value seems to be constant even if we change the dimensions of the container (FIDDLE)
Use SVG or CSS3 to draw the arrow. Give that element cursor: pointer give the div wrapper non-cursor
Relevant article to implement this: http://www.smashingmagazine.com/2014/11/03/styling-and-animating-svgs-with-css/
You could mask the non-triangle areas with pseudo elements, with cursor: default set on them. You'd need to add overflow: hidden to the wrapping element to contain the masks, and of course it relies on the background being a flat colour and the shape you want to mask being a perfect triangle. Not massively extensible and a bit hacky, but it gets the specific result you're after.
#triangleholder {
// ..
overflow: hidden;
}
#triangle {
// ..
position: relative;
}
#triangle:before, #triangle:after {
content: "";
display: block;
position: absolute;
background: white;
width: 100px;
height: 50px;
top: -10px;
cursor: default;
}
#triangle:before {
transform: rotate(-45deg);
right: 0;
}
#triangle:after {
transform: rotate(45deg);
left: 0;
}
So I'm trying to make an image and it's background fade in when you click it using the :target selector. (Similar to Lightbox: http://lokeshdhakar.com/projects/lightbox2/, but css only).
html:
<img src="img/thumb-3.jpg">
<img src="img/thumb-4.jpg">
<img src="img/image-3.jpg">
<img src="img/image-4.jpg">
css:
.lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
text-align: center;
background: rgba(38, 38, 38, 0);
transition: background 0.3s ease;
}
.lightbox img {
max-height: 90%;
max-width: 70%;
margin: 3%;
border-radius: 5px;
border: 5px solid #cbcbcb;
}
.lightbox:target {
display: block;
background: rgba(38, 38, 38, 0.7);
}
Only problem: it doesn't work. It tried it with other elements and it worked just fine. Any suggestions? Thanks.
Your code works in some way, but not completed. I have improved it based on your code and here's a working cross browser and responsive DEMO
Still using your :target selector.