Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
I'm trying to get the underline effect when the input is focused (-> left to right)
I saw a lot of "tricks" you can achive that with.
But I was wondering what is the most efficient way to achive this?
(Browser support wise and syntactic wise)
Thanks.
.input{
position: relative;
display: inline-block;
overflow: hidden;
}
.input > .txt-underline{
border: none;
outline: none;
}
.underline{
transition: all 0.5s;
display: inline-block;
bottom: 0;
left: -100%;
position: absolute;
width: 100%;
height: 2px;
background-color: #f00;
}
.input > .txt-underline:focus + .underline{
left: 0;
}
<div class="input">
<input type="text" class="txt-underline" placeholder="Please Enter Name">
<span class="underline"></span>
</div>
Here is a simple and easy example.
#input {
position: relative;
display: inline-block
}
span {
content: '';
position: absolute;
left: 0;
bottom: -5px; /* depending on height */
height: 5px; /* height of span -like border */
background: #f00;
transition: all 0.5s linear;
width: 0 /* hidden */
}
input:hover ~ span {
width: 100% /* full width on hover */
}
<div id="input">
<input type="text" placeholder="input" /><span></span>
</div>
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I hope the title is clear enough. I have an image and a div in the same place in a grid. The div (which is behind the image) has a button. When I use :hover { opacity: 0%; } on the image and the div comes to the front, im not able to click on the button. How can i solve this problem?
html + scss
You can not use opacity for your image, because because your image would still be on top, only with no opacity.
Try something with z-index.
.card {
position: relative;
display: inline-block;
}
.card > div {
position: absolute;
width: 100%;
height: 100%;
background: red;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
}
.card img {
display: block;
position: relative;
visibility: visible;
max-width: 200px;
z-index: 2;
width: 100%;
/*transform: visibility .3s ease;*/
transition: opacity .5s ease, z-index 0s 0s;
}
.card:hover img {
z-index: -1;
opacity: 0;
transition: opacity .75s ease, z-index 0s .75s;
}
<div class="card">
<img src="https://dummyimage.com/600x400/000/fff" alt="">
<div>
<button>
click
</button>
</div>
</div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
He everyone i am strugling to find a css that will work to get a overlay on my feautured image so you can see my title more clear. For the site www.quinstudio.nl/gallery. Any idea how i can get this to work?
? {
background: #000;
opacity: .1;
}
There are several ways you could approach this. There's no real difference in how they'll turn out; you can use whichever works better with the markup you have. The first option is a little simpler because there's no empty div being added as a color overlay.
Option 1: Make the colored background opaque, and the image partially transparent.
.image-wrapper {
display: inline-block;
background: #0cd;
/* You need this line for the centered h1 below to work. */
position: relative;
}
.image-wrapper img {
opacity: 0.5;
display: block;
}
.image-wrapper h1 {
/* Here's a trick for centering your title, if you want. */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: auto;
color: #fff;
}
<div class="image-wrapper">
<img src="https://loremflickr.com/320/240" alt="Kitten">
<h1>Kitty!</h1>
</div>
Option 2: Make the image opaque, and put a partially transparent overlay on top of it.
.image-wrapper {
display: inline-block;
position: relative;
}
.image-wrapper img {
display: block;
}
.image-overlay {
background: #000;
opacity: 0.5;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 2; /* puts this div 'in front' of the image */
}
.image-wrapper h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
z-index: 3; /* puts the text in front of the dark overlay */
}
<div class="image-wrapper">
<img src="https://loremflickr.com/320/240" alt="Kitty!">
<div class="image-overlay"></div>
<h1>Kitty?</h1>
</div>
While #jack's answer is good, I'd like to share an alternative one that doesn't use an <img> element and instead uses the :after pseudo-element.
This allows you to use the CSS background image on the container and essentially add a fake element that has the color overlay on it:
.container {
background: url(https://loremflickr.com/320/240);
width: 320px;
height: 240px;
position: relative;
}
.overlay > * {
z-index: 1;
position: relative;
color: #fff;
}
.overlay:after {
content: "";
background: #0095ee;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: .65;
}
<div class="overlay container">
<h1>Title</h1>
</div>
Edit:
Your situation is a little different. You can just lower the opacity of the image and add a black background to it's parent container. Try the following:
.edgt-justified-layout .edgt-ni-inner .edgt-ni-image-holder .edgt-post-image img {
opacity: .75;
}
.edgt-justified-layout .edgt-ni-inner .edgt-ni-image-holder .edgt-post-image {
background: #000;
}
It will lower the opacity of the image (which will make it look "whiter", so we can add a black (or whatever color you want) background to it's parent container to compensate and darken it instead.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
How can i create css figure? I need something like on image.
May be online service, but i didn't find. It's a heavy figure, that's why I'm asking. Also, lateral colored figures I will need to change color.
IMAGE
If I understood your question correctly, here is a example how you can reach the goal.
button.figure {
border: none;
padding: 8px;
color: #2F2F2F;
font-size: 18px;
border-radius: 10px / 50%;
min-width: 100px;
position: relative;
margin-left: 20px;
}
button.figure:before,
button.figure:after {
content: "";
width: 50px;
height: 100%;
position: absolute;
top: 0;
border-radius: 10px/50%;
z-index: -1;
}
button.figure:before {
background: red;
margin-left: -6px;
left: 0;
}
button.figure:after {
background: green;
margin-right: -6px;
right: 0;
}
<button class="figure">Button</button>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I am trying to absolutely position sideways text inside a div that there are multiple occurences of.
Each child has position: absolute; ,
and each parent has position: relative;
.parent{
width: 24%;
display: inline-block;
float: left;
border-left: 1px solid #FFA500;
position: relative;
}
.child{
display: inline-block;
line-height: 1.5;
height: 5%;
position: absolute;
top: 0px;
right: 0px;
transform: translate(0px, 100%) rotate(90deg);
overflow: hidden;
float: right;
}
Of of the children go to the same exact place on the page, which seems to be the first childs parent.
The structure is
Parent
child
close
close
for all 4 divs.
Can anyone please help?
In your css, if your parent has no content other than the absolute position child div, then the parent has a 0 height declaration - so you have to set the height of the parent div in pixels in order to give it a place in the DOM.
Your height: 5% on the .child may be what is throwing it off (it was for me). That, or there could be other css that is overriding something for you. Fiddle here: https://jsfiddle.net/tagb3yja/
.parent{
width: 24%;
display: inline-block;
float: left;
border-left: 1px solid #FFA500;
position: relative;
background: yellow;
}
.child{
position: absolute;
display: inline-block;
line-height: 1.5;
top: 0px;
right: 0px;
transform: translate(0px, 100%) rotate(90deg);
overflow: hidden;
float: right;
background: silver;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I am having a problem with horizontally centering a DIV.
I have provided a full example here.
This is inside a Content Editor WebPart in SharePoint 2010 Standard.
http://fiddle.jshell.net/hdA7d/
<div class="weathercontainer">
<div id="weather" class="items" onClick="window.open( 'http://www.weather.com/weather/today/33196','_blank' ); return false; " >
</div>
</div>
.weathercontainer{
width: 100%;
}
.items {
width: 170px;
margin: 0px auto;
position: relative;
cursor: pointer;
}
Like this
demo
css
.center
{
left: 50%;
position: absolute;
top: 50%;
}
.center div
{
border: 1px solid black;
margin-left: -50%;
margin-top: -50%;
height: 100px;
width: 100px;
}
You can just give the absolutely positioned .items a left and right position of 0 and a margin of auto:
.items {
position:absolute;
margin: 0px auto;
left:0;
right:0;
}
See this updated fiddle.
Check if this works for you.
click here
display: table-cell;
vertical-align: middle;