CSS: Transition effect on text input border - css

How to create transition effect like:
http://jsfiddle.net/mfn5nefb/6/
but for text input?
I tried replace h1 with input but it does not work.

You have to change the HTML structure to do the same with input because you can't use pseudo elements like :after on an input element (which is an auto closing element)
HTML
<div id="input">
<input type="text" value="CSS IS AWESOME" /><span></span>
</div>
CSS
#input {
color: #666;
position: relative;
display: inline-block;
}
span {
position: absolute;
left: 50%;
content: '';
height: 40px;
height: 5px;
background: #f00;
transition: all 0.5s linear;
width: 0;
bottom: -5px;
}
input:hover ~ span {
width: 200px;
margin-left: -105px;
}
See this fiddle

.input_container{
display: inline-block;
text-align: center;
}
.awsome_input{
padding: 5px 10px;
border: none;
background: transparent;
display: block;
}
.awsome_input_border{
display:inline-block;
width:0px;
height: 2px;
background: #FEC938;
position: relative;
top:-5px;
-webkit-transition: all ease-in-out .15s;
-o-transition: all ease-in-out .15s;
transition: all ease-in-out .15s;
}
.awsome_input:hover,
.awsome_input:active,
.awsome_input:focus{
outline: none;
}
.awsome_input:hover+.awsome_input_border,
.awsome_input:active+.awsome_input_border,
.awsome_input:focus+.awsome_input_border{
width:100%;
}
<div class="input_container">
<input type="text" class="awsome_input"
placeholder="What do you think?"/>
<span class="awsome_input_border"/>
</div>

Related

Nested input and select box with hover transition

I have a select box that sits directly next to an input box, (see relevant snippet below).
Currently, two seperate transition animations play in order to display both boxes on hover.
I would like to only use a single transition to display both boxes on hover.
Is there a cleaner way to do this? Could different positioning properties help me? Thanks in advance!
html, body {
background-color: rgba(64, 124, 165, 1);
}
.quick-search-container {
cursor: pointer;
width: 350px;
vertical-align: top;
white-space: nowrap;
position: relative;
top: -5px;
float: left;
}
.quick-search-container input#search {
width: 20px;
height: 30px;
background: rgba(64, 124, 165, 1); /*replacement*/
border: none;
font-size: 10pt;
float: right;
color: #262626;
padding-right: 35px;
padding-left: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
color: #000;
-webkit-transition: width .55s ease, background-color .55s ease;
-moz-transition: width .55s ease, background-color .55s ease;
-ms-transition: width .55s ease, background-color .55s ease;
-o-transition: width .55s ease, background-color .55s ease;
transition: width .55s ease, background-color .55s ease;
}
.quick-search-container input#search {
color: #65737e;
border: none;
}
.quick-search-container .icon {
position: absolute;
vertical-align: text-top;
right: 0;
margin-right: 10px;
margin-top: 6px;
color: #333;
font-size: 18px;
}
.quick-search-container .selector {
float: right;
vertical-align: text-top;
margin-right: 10px;
margin-top: 6px;
color: #ffffff;
font-size: 18px;
}
.quick-search-container input#search:focus,
.quick-search-container input#search:active,
select#selector:active {
outline: none;
}
.quick-search-container:hover input#search {
outline: none;
width: 180px;
background: #fff;
}
.quick-search-container:hover select#selector {
outline: none;
width: 100px;
}
.quick-search-container:hover .icon {
color: rgba(64, 124, 165, 1); /*replacement*/
}
.quick-search-container .selector {
margin-right: 0px;
margin-top: 0px;
transition: width .22s ease, background-color .55s ease;
}
.quick-search-selector {
margin-right: 0px;
margin-top: 0px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border: none;
height: 30px;
width: 0px;
color: black;
transition: width .55s ease, background-color .55s ease;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<a class="quick-search-container">
<span class="icon">
<i (click)="initQuickSearch()" class="fa fa-search"></i>
</span>
<input type="search" id="search" placeholder="Search...">
<span class="selector">
<select class="quick-search-selector" id="selector">
<option>VIN</option>
<option>Make</option>
<option>Model</option>
<option>Cow</option>
</select>
</span>
</a>
Just wrap input and select boxes into a container and set animations on it, see the simplified demo by using flexbox below. You can adjust the style as needed.
jsFiddle
html {
background-color: rgba(64, 124, 165, 1);
}
.quick-search-container {
position: relative;
width: 250px;
display: flex;
justify-content: flex-end;
align-items: center;
border: 1px solid;
}
.input-select {
width: 0;
overflow: hidden;
transition: width 1s;
display: flex;
}
.quick-search-selector {
width: 30%;
height: 30px;
}
.quick-search-input {
width: 70%;
-webkit-appearance: none;
outline: 0;
height: 30px;
}
.quick-search-container:hover .input-select {
width: 100%;
}
.quick-search-button {
position: absolute;
right: 0;
top: 0;
bottom: 0;
font-size: 16px;
background: none;
border: 0;
outline: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<a class="quick-search-container">
<span class="input-select">
<select class="quick-search-selector" id="selector">
<option>VIN</option>
<option>Make</option>
<option>Model</option>
<option>Cow</option>
</select>
<input type="search" class="quick-search-input" placeholder="Search..." id="search">
</span>
<button class="quick-search-button">
<i class="fa fa-search"></i>
</button>
</a>

How to stretch label over a custom div to achieve radio button click

I'm trying to make a custom radio button. I've found this neat style which I want to tweak a bit so that items are laid out horizontally.Consider the following html:
<div style="margin-left:30px;">
<div class='container'>
<input type="radio" id="rdArts" name="itemcat">
<label for="rdArts">Arts</label>
<div class="check"></div>
</div>
<div class='container'>
<input type="radio" id="rdElectronics" name="itemcat">
<label for="rdElectronics">Electronics</label>
<div class="check"></div>
</div>
<div class='container'>
<input type="radio" id="rdCars" name="itemcat">
<label for="rdCars">Cars</label>
<div class="check"></div>
</div>
</div>
and this css:
.container{
float:left;
position:relative;
margin-right:20px;
}
.container input[type=radio]{
position: absolute;
visibility: hidden;
}
.container label{
display: block;
position: ;
font-weight: 300;
font-size: 1.2em;
padding: 25px 25px 25px 10px;
margin: 10px auto;
height: 30px;
z-index: 9;
cursor: pointer;
-webkit-transition: all 0.25s linear;
}
.container:hover label{
color: #485776;
}
.container:hover .check{
border-color: #485776;
}
.container:hover .check::border{
background-color: #485776;
}
.container .check{
display: block;
position: relative;
border: 4px solid #333E54;
border-radius: 100%;
height: 15px;
width: 15px;
top: -67px;
left: -25px;
z-index: 5;
transition: border .25s linear;
-webkit-transition: border .25s linear;
}
.container .check::before {
display: block;
position: relative;
content: '';
border-radius: 100%;
height: 11px;
width: 11px;
top: 2px;
left: 0px;
margin: auto;
transition: background 0.25s linear;
-webkit-transition: background 0.25s linear;
}
input[type=radio]:checked ~ .check::before{
background: #333E54;
}
I am able to get this:
The only problem is I cannot get click to work on the pseudo radio button itself. I need to click on the label. And the reason is because in my case, label does not stretch over to the ".check" div. What style should I give to my label to make it overlay the div? If you want to see the full html and css,here it is.
This should be working:
I slightly edited the .container label style to move a bit to the left to be above the checkbox images.
.container{
float:left;
position:relative;
margin-right:20px;
}
.container input[type=radio]{
position: absolute;
visibility: hidden;
}
.container label{
display: block;
position: ;
font-weight: 300;
font-size: 1.2em;
height: 30px;
z-index: 9;
cursor: pointer;
-webkit-transition: all 0.25s linear;
margin: 10px auto 10px -26px;
padding: 25px 25px 25px 36px;
position: relative;
}
.container:hover label{
color: #485776;
}
.container:hover .check{
border-color: #485776;
}
.container:hover .check::border{
background-color: #485776;
}
.container .check{
display: block;
position: relative;
border: 4px solid #333E54;
border-radius: 100%;
height: 15px;
width: 15px;
top: -67px;
left: -25px;
z-index: 5;
transition: border .25s linear;
-webkit-transition: border .25s linear;
}
.container .check::before {
display: block;
position: relative;
content: '';
border-radius: 100%;
height: 11px;
width: 11px;
top: 2px;
left: 0px;
margin: auto;
transition: background 0.25s linear;
-webkit-transition: background 0.25s linear;
}
input[type=radio]:checked ~ .check::before{
background: #333E54;
}
<div style="margin-left:30px;">
<div class='container'>
<input type="radio" id="rdArts" name="itemcat">
<label for="rdArts">Arts</label>
<div class="check"></div>
</div>
<div class='container'>
<input type="radio" id="rdElectronics" name="itemcat">
<label for="rdElectronics">Electronics</label>
<div class="check"></div>
</div>
<div class='container'>
<input type="radio" id="rdCars" name="itemcat">
<label for="rdCars">Cars</label>
<div class="check"></div>
</div>
</div>

CSS – Blurring image with un-blurred text

I have div elements that are 200px tall and 200px wide, and I am filling each div element with an image of a person.
Upon hovering on the image, I want the image to be blurred, but I simultaneously want text to appear on the image (unblurred) that gives a description of who they are. Does anyone know how to do this?
So far, this is what I am getting:
Here is the CSS code:
.mem1 {
height: 200px;
width: 200px;
margin: 0px 31px;
display: inline-block;
border-radius: 10px;
border: solid;
border-width: thin;
border-color: #d6d6d6;
background-image: url(members/giles.png);
}
.mem1 p {
text-align: center;
position: absolute;
margin: 70px 30px;
visibility: hidden;
}
.mem1:hover {
-webkit-filter: blur(2px);
}
.mem1:hover p {
text-align: center;
position: absolute;
margin: 70px 30px;
color: #ffffff;
text-shadow: 1px 1px #000000;
-webkit-filter: blur(0px);
visibility: visible;
}
It sounds like the text is a child of the element that you are blurring. You can't do that. You need to do something like this:
<div class="container">
<div class="blurredPhoto"></div>
<div class="text">Your Text</div>
</div>
.container {
width: 200px;
height: 200px;
position: relative;
}
.blurredPhoto {
position: absolute;
width: 200px;
height: 200px;
}
.text {
position: absolute;
width: 200px;
height: 200px;
}
Then apply your blurring logic only to the .blurredPhoto object.
Here is a code snippet that does what you are looking for - blurring an image when you mouse over it, while simultaneously showing a textual description.
The key is that you need to use the :hover pseudoclass on the div, then when the div is hovered, you blur the image only, and show the description text span.
.blur {
width: 350px;
height: 350px;
}
.blur img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.blur span {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.blur:hover img {
-webkit-filter: blur(5px);
}
.blur span {
opacity: 0;
position: absolute;
top: 30px;
left: 30px;
}
.blur:hover span {
opacity: 1;
}
<div class="blur pic">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=350&h=350">
<span>This is a photo of something.</span>
</div>
As #DA explained you need to get a parent container involved. Here's a working fiddle using your example code: https://jsfiddle.net/m25gkqkL/1/
<div class="parent">
<div class="mem1"></div>
<p>Hello World!</p>
</div>
.mem1 {
height: 200px;
width: 200px;
margin: 0px 31px;
display: inline-block;
border-radius: 10px;
border: solid;
border-width: thin;
border-color: #d6d6d6;
background-image: url(members/giles.png);
z-index: 1;/* added */
position: relative;/* added */
}
.parent {/* added this */
position: relative;
height: 200px;
width: 262px;
}
.parent p {/* modified */
text-align: center;
position: absolute;
visibility: hidden;
top: 50%;/* modified */
margin-top: -0.5em;/* added */
width: 262px;/* added */
z-index: 2;/* added */
}
.parent:hover .mem1 {/* modified */
-webkit-filter: blur(2px);
}
.parent:hover p {/* modified */
color: #ffffff;
text-shadow: 1px 1px #000000;
-webkit-filter: blur(0px);
visibility: visible;
}
.parent{
position: relative;
}
.text-child{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: all .3s ease;
z-index: 1;
}
.text-child h1{
color: black;
text-decoration: none;
font-size: 40px;
}
.parent:hover img{
filter: blur(4px);
}
.parent:hover .text-child{
opacity: 1;
}
<div class="parent">
<div class="text-child">
<h1> hi this is text.<h1>
</div>
<img src="/images/excel.png" alt="">
</div>

Changing border-bottom to border-top

I want to have a transistion on my menu list when hovered but I want to change the border-bottom to border-top.
How can I do this?
.sliding-middle-out {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.sliding-middle-out:after {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.sliding-middle-out:hover:after {
width: 100%;
background: blue;
}
<li class="scroll sliding-middle-out">Features</li>
You can use the :before pseudo element instead of the :after pseudo element so the line is displayed on top of (before) your link:
.sliding-middle-out {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.sliding-middle-out:before {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.sliding-middle-out:hover:before {
width: 100%;
background: blue;
}
<li class="scroll sliding-middle-out">Features</li>
Note that the line isn't made with the border property but with the background of the pseudo element

Scrollable / hoverable CSS tooltip with psuedo elements

I have a hoverable CSS-only tooltip that works well in most instances, but I want to add a scrollbar when it exceeds a max-height. If I add max-height: 50px; overflow-y: auto, my pseudo elements :before and :after will disappear due to the overflow property.
See: http://jsfiddle.net/accelerate/24xwru1n/
Is there a way to add a scrollbar to my tooltip while maintaining my pseudo elements? Or will I have to live without my pseudo elements to make it work?
I'm afraid you have to add a wrapper when you want a scroll in hover and apply to this the css as in tooltip-text:
HTML
<div class="tooltip tooltip-scroll">Hover over me for scrollbar
<div class="wrapper">
<span class="tooltip-text">Hello there<br/>abc<br/>def<br/>ghi<br/>jkl<br/></span>
</div>
</div>
.wrapper{
position:relative;
}
.tooltip {
transform: none;
margin: 50px;
}
.tooltip:hover > .tooltip-text, .tooltip:hover > .wrapper {
pointer-events: auto;
opacity: 1.0;
}
.tooltip > .tooltip-text, .tooltip >.wrapper {
display: block;
position: absolute;
z-index: 6000;
overflow: visible;
padding: 5px 8px;
margin-top: 10px;
line-height: 16px;
border-radius: 4px;
text-align: left;
color: #fff;
background: #000;
pointer-events: none;
opacity: 0.0;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
/* Arrow */
.tooltip > .tooltip-text:before, .tooltip > .wrapper:before {
display: inline;
top: -5px;
content: "";
position: absolute;
border: solid;
border-color: rgba(0, 0, 0, 1) transparent;
border-width: 0 .5em .5em .5em;
z-index: 6000;
left: 20px;
}
/* Invisible area so you can hover over tooltip */
.tooltip > .tooltip-text:after, .tooltip > .wrapper:after {
top: -20px;
content: " ";
display: block;
height: 20px;
position: absolute;
width: 60px;
left: 20px;
}
.wrapper > .tooltip-text {
overflow-y: auto;
max-height: 40px;
display: block;
}
<div class="tooltip">Hover over me for no scrollbar<span class="tooltip-text">Hello there<p/>abc<br/>def<br/>ghi<br/>jkl<br/></span></div>
<p/><p/><p/>
<div class="tooltip tooltip-scroll">Hover over me for scrollbar
<div class="wrapper">
<span class="tooltip-text">Hello there<br/>abc<br/>def<br/>ghi<br/>jkl<br/></span>
</div>
</div>

Resources