Netflix-like hover effect with buttons [closed]

Netflix-like hover effect with buttons [closed] - javascript

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 2 years ago.
Improve this question
How do I create a hover effect as shown in the gif? All I could do now is zoom it on hover. How do I add the buttons and other details too, on hover?
I've done this so far:
.Row_poster:hover {
transform: scale(1.3);
overflow: visible;
cursor: pointer;
z-index: 98;
}

Pure CSS Methods
Although the effect can be obtained using JavaScript, here are some pure CSS methods.
Method 1: Use ::after and ::before.
Read:
::after on MDN
::before on MDN
body,
html {
height: 100%;
width: 100%;
background: #141414;
margin: 0;
padding: 25px;
box-sizing: border-box;
font-family: Lato, 'Segoe UI', Roboto, sans-serif;
}
.square {
background-size: cover!important;
background-position: center!important;
display: inline-block;
width: 150px;
height: 100px;
transition: transform 100ms ease-out, border-radius 200ms ease-out;
}
.square:hover {
background: url(https://media.giphy.com/media/lgcUUCXgC8mEo/giphy.gif), url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;
border-radius: 10px 10px 0 0;
transform: scale(1.5);
box-shadow: 0 0 2px #000a;
}
.square::after {
position: relative;
top: 100px;
display: block;
background: #18181818;
box-shadow: 0 0 2px #000a;
color: #fff;
width: 150px;
height: fit-content;
padding: 5px;
box-sizing: border-box;
opacity: 0;
border-radius: 0 0 10px 10px;
transition: opacity 300ms ease-out, border-radius 200ms ease-out;
}
.square:hover::after {
opacity: 1;
}
.square.one {
background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;
}
.square.one:hover {
background: url(https://media.giphy.com/media/lgcUUCXgC8mEo/giphy.gif), url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;
}
.square.one::after {
content: 'Never Gonna Give You Up!';
}
<div class="square one"></div>
You should prefer using this method if your caption-thing is not very customized.
Method 2: Use separate elements
This method is best no matter how customized is your caption-thing.
body,
html {
height: 100%;
width: 100%;
background: #111;
margin: 0;
padding: 25px;
box-sizing: border-box;
font-family: Lato, 'Segoe UI', Roboto, sans-serif;
}
.square {
width: 150px;
height: 100px;
transition: transform 100ms ease-out, border-radius 200ms ease-out;
}
.square .cover {
width: 100%;
height: 100px;
border-radius: 10px 10px 0 0;
background-size: cover!important;
background-position: center!important;
}
.square .text {
display: none;
background: #181818;
color: #fff;
width: 100%;
height: fit-content;
padding: 5px;
box-sizing: border-box;
transition: opacity 300ms ease-out, border-radius 200ms ease-out;
border-radius: 0 0 10px 10px;
}
.square:hover {
border-radius: 10px;
transform: scale(1.5);
box-shadow: 0 0 2px #000a;
}
.square:hover .text {
display: block;
}
.square.one .cover {
background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;
}
.square.one:hover .cover {
background: url(https://media.giphy.com/media/lgcUUCXgC8mEo/giphy.gif), url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;
}
<div class="square one">
<div class="cover"></div>
<div class="text">
Never Gonna Give You Up!
</div>
</div>
The Result
Use Method 2. This looks very similar to the gif.
body,
html {
height: 100%;
width: 100%;
background: #141414;
margin: 0;
padding: 25px;
box-sizing: border-box;
font-family: 'Segoe UI', Roboto, sans-serif;
}
.square {
width: 150px;
height: 100px;
transition: transform 100ms ease-out, border-radius 200ms ease-out;
}
.square .cover {
width: 100%;
height: 100px;
border-radius: 10px 10px 0 0;
background-size: cover!important;
background-position: center!important;
}
.square .text {
display: none;
background: #181818;
color: #fff;
width: 100%;
height: fit-content;
padding: 5px;
box-sizing: border-box;
transition: opacity 300ms ease-out, border-radius 200ms ease-out;
border-radius: 0 0 10px 10px;
}
.square:hover {
border-radius: 10px;
transform: scale(1.5);
box-shadow: 0 0 2px #000a;
}
.square:hover .text {
display: block;
}
.square.one .cover {
background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;
}
.square.one:hover .cover {
background: url(https://media.giphy.com/media/lgcUUCXgC8mEo/giphy.gif), url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;
}
.square .text .info {
font-size: 8px;
}
.icons {
display: flex;
align-items: center;
justify-content: space-between;
}
.icons :nth-child(3) {
margin-left: auto;
}
.icons span{
border-radius: 50%;
border: 1px solid #777;
width: 18px;
height: 18px;
margin-right: 2px;
font-size: 12px;
text-align: center;
line-height: 18px;
font-weight: 1000;
overflow: hidden;
}
.rating {
border: 0.1px solid white;
padding: 1px 2px;
}
.match {
color: green;
font-weight: bold;
}
<div class="square one">
<div class="cover"></div>
<div class="text">
<div class="icons">
<span>:)</span>
<span>O</span>
<span>V</span>
</div>
<div class="info">
<span class="match">98% Match</span>
<span class="rating">18+</span>
<span class="seasons">5 Seasons</span>
</div>
</div>
</div>

Hi Harsh,
Please have a look at the below code I put together to see if this is what you are trying to achieve, pal.
$(document).ready(function () {
$(document).on('mouseenter', '.transformar', function () {
$(this).find(".playButtons").show('slow');
}).on('mouseleave', '.transformar', function () {
$(this).find(".playButtons").hide();
});
});
.transformar {
display:block;
height:150px;
transition: transform 2s;
}
.playButtons{display: none}
.transformar:hover{
transform: scale(2);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='transformar' align="center">
<img src="https://i.pinimg.com/originals/e1/d0/1b/e1d01b1b7f602d223afc747fcbced364.jpg" height="150" alt="Netflix Example">
<h2>Filme do Netflix</h2>
<div id="#botones" class="playButtons">
<button type="button">PLAY EPISODE</button>
</div>
</div>

Related

Alignment Fix in html/css

I have the following code:
#import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.blogmaster {
margin-top: 0;
margin-bottom: 0;
}
.container1 {
display: grid;
grid-template-columns: repeat(2, 1fr);
padding: 20px;
overflow: hidden;
}
.square {
margin-top: 0;
margin-bottom: 0;
max-width: 460px;
height: 100% !important;
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
margin-left: auto;
}
.square:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square .square-image img {
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 5px solid #555;
}
.square .square-details {
padding: 20px 30px 30px;
}
.h11 {
margin: auto;
text-align: left;
font-family: 'Merriweather', serif;
font-size: 24px;
}
p0 {
text-align: justify;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #C8C8C8;
line-height: 18px;
margin-top: 10px;
display: block;
}
.button56 {
background-color: #0563bb;
color: white;
width: 100px;
padding: 10px 18px;
border-radius: 3px;
text-align: center;
text-decoration: none;
display: block;
font-size: 12px;
margin-top: 18px;
margin-bottom: 0;
cursor: pointer;
font-family: 'merriweather';
}
.button56:hover {
opacity: 0.9;
color: white;
}
#media screen and (max-width: 480px) {
.square {
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
margin-top: 0;
}
}
#media screen and (max-width: 480px) {
.square .square-image img {
height: 230px !important;
border: 5px solid #555;
}
}
/* iframe css*/
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.resume .resume-title {
font-size: 26px;
font-weight: 700;
margin-top: 20px;
margin-bottom: 20px;
color: #050d18;
}
.resume .resume-item {
position: relative;
text-align: center;
}
.add {
padding: 0;
}
.iframe {
height: 1070px;
margin-left: auto;
margin-right: auto;
width: 80%;
}
#media all and (max-width: 500px) {
.embed-responsive {
height: auto;
}
.iframe {
height: 130vw;
}
}
<section>
<div class="section-title">
<h2>Featured Blogs Of The Day</h2>
</div>
<div class="container1">
<div class="square">
<div class="square-image">
<img src="assets/img/Blog1.png">
</div>
<div class="square-details">
<h3 class="h11">“Chances Of My Uni/College Admission?”</h3>
<p0>It is that time of the year again (yay!🙂) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p0>
<div>Read More</div>
</div>
</div>
</div>
</section>
<section id="resume" class="resume">
<div class="container">
<div class="section-title">
<h2>IFrame
</h2>
</div>
<div class="resume-item">
<iframe src="https://drive.google.com/file/d/11nfRuy7JVyGX8LY2q9HR5JSqrBpFNtJ4/preview" width="100%" class="iframe"></iframe>
</div>
</div>
</section>
I want the corner of the blog card to be perfectly aligned under the corner of the iFrame. The first corner of the blog card should be right under the first corner of the iFrame.
Expected Output
Expected Output
How would I modify the CSS to have it output as the above picture? Adding margin-left: auto on square does not work. Any suggestions would greatly help! Thanks a lot!

My suggestion is to remove the grid and padding from .container1, align the iframe left, and set both left margins to 10%.
Since the iframe is width:80%, 10% on each side will center it. And the matching margin on the top element will align the left edges of the two elements.
#import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.square {
max-width: 460px;
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
margin-left: 10%;
}
.square:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square .square-image img {
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 5px solid #555;
}
.square .square-details {
padding: 20px 30px 30px;
}
.h11 {
margin: auto;
text-align: left;
font-family: 'Merriweather', serif;
font-size: 24px;
}
p0 {
text-align: justify;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #C8C8C8;
line-height: 18px;
margin-top: 10px;
display: block;
}
.button56 {
background-color: #0563bb;
color: white;
width: 100px;
padding: 10px 18px;
border-radius: 3px;
text-align: center;
text-decoration: none;
display: block;
font-size: 12px;
margin-top: 18px;
margin-bottom: 0;
cursor: pointer;
font-family: 'merriweather';
}
.button56:hover {
opacity: 0.9;
color: white;
}
.iframe {
height: 1070px;
margin-left: 10%;
width: 80%;
}
<section>
<div class="section-title">
<h2>Featured Blogs Of The Day</h2>
</div>
<div class="container1">
<div class="square">
<div class="square-image">
<img src="assets/img/Blog1.png">
</div>
<div class="square-details">
<h3 class="h11">“Chances Of My Uni/College Admission?”</h3>
<p0>It is that time of the year again (yay!🙂) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p0>
<div>Read More</div>
</div>
</div>
</div>
</section>
<section id="resume" class="resume">
<div class="container">
<div class="section-title">
<h2>IFrame
</h2>
</div>
<div class="resume-item">
<iframe src="https://drive.google.com/file/d/11nfRuy7JVyGX8LY2q9HR5JSqrBpFNtJ4/preview" width="100%" class="iframe"></iframe>
</div>
</div>
</section>

Button with hidden input

I want to create a button with a hidden input that activates once the button was pressed.
I made demo but in this demo input animated via changing width and padding which is not good.
So is there any better way to animate this button?
HTML:
<div class="button-wrap">
<label>Max score</label>
<input>
</div>
CSS:
.button-wrap {
display: flex;
height: var(--height);
outline: none;
--height: 20px;
--padding: 5px;
--background: #454555;
--background-active: #46467c;
--background-hover: #46467c;
--separator: #565666;
--radius: 5px;
--input-width: 30px;
--text-color: #eee;
}
input, label {
height: auto;
transition: .3s;
outline: 0;
color: var(--text-color);
text-align: center;
}
label {
display: inline;
width: 100%;
padding: var(--padding);
border-radius: var(--radius);
background-color: var(--background);
border-color: var(--separator);
transition: border-radius .5s;
user-select: none;
text-align: center;
}
input {
padding: var(--padding) 0;
border: none;
width: 0;
background-color: var(--background);
border-radius: 0 var(--radius) var(--radius) 0;
}
.button-wrap:hover label,
.button-wrap:hover input {
background-color: var(--background-hover);
}
.button-wrap[active] label {
border-radius: var(--radius) 0 0 var(--radius);
background-color: var(--background-active);
border-color: var(--separator);
border-right: 2px solid var(--separator);
transition: border-radius .3s;
}
.button-wrap[active] input {
width: calc(var(--input-width) - 2 * var(--padding));
background-color: var(--background-active);
padding: var(--padding);
}
Attribute 'active' is added by js after the button was pressed.
And there is the demo:

function myFunction(e) {
e.toggleAttribute("active").toggle;
}
.button-wrap {
display: flex;
outline: none;
--height: 20px;
--padding: 5px;
--background: #47478d;
--background-active: #46464f;
--background-hover: #46467c;
--separator: #565666;
--radius: 5px;
--input-width: 40px;
--text-color: #eee;
width: 250px;
height: 40px;
background:#34344d;
padding:15px;
}
input, label {
height: auto;
outline: 0;
color: var(--text-color);
text-align: center;
}
label {
display: flex;
width: 100%;
padding: var(--padding);
border-radius: var(--radius);
background-color: var(--background);
border-color: var(--separator);
transition: border-radius .5s;
user-select: none;
text-align: center;
align-items:center;
justify-content:center;
}
input {
padding: var(--padding);
border: none;
width: calc(var(--input-width) - 2 * var(--padding));
background-color: var(--background);
border-radius: 0 var(--radius) var(--radius) 0;
overflow: hidden;
display: none;
opacity: 0;
transition: display 0ms 400ms, opacity 400ms 0ms;
}
.button-wrap:hover label,
.button-wrap:hover input {
background-color: var(--background-hover);
}
.button-wrap[active] label {
border-radius: var(--radius) 0 0 var(--radius);
background-color: var(--background-active);
border-color: var(--separator);
border-right: 2px solid var(--separator);
transition: border-radius .3s;
}
.button-wrap[active] input {
background-color: var(--background-active);
padding: var(--padding);
color:#fff;
opacity: 1;
display:block;
transition: display 0ms 0ms, opacity 600ms 0ms;
}
<div class="button-wrap" onclick="myFunction(this)">
<label>Max score</label>
<input type="text" value="100">
</div>

So there's the answer that my teacher came up with.
HTML
<div class='button-wrap'>
<label>Max count</label>
<input>
</div>
CSS
.button-wrap {
width: 200px;
contain: content;
overflow: hidden;
border-radius: 5px;
position: relative;
outline: none;
height: 30px;
line-height: 20px;
background: #454555;
--input-width: 32px;
}
.button-wrap[active] {
background-color: #46467c;
}
.button-wrap:hover {
background-color: #46467c;
}
input, label {
height: 100%;
display: block;
box-sizing: border-box;
transition: transform .3s;
appearance: none;
outline: 0;
color: #eee;
border: none;
text-align: center;
background: transparent;
padding: 5px;
}
label {
width: 100%;
user-select: none;
}
input {
position: absolute;
top: 0;
right: 0;
border-left: 2px solid #565666;
width: var(--input-width);
transform: translateX(var(--input-width));
}
.button-wrap[active] label {
transform: translateX(calc(-1 * var(--input-width) / 2));
}
.button-wrap[active] input {
transform: translateX(0);
}
Here's the demo

Issue with CSS Text box rendering in IE

I have been trying to build a search engine using basic HTML and CSS for my Uni but IE just doesnt seem to like text boxes. Works perfectly fine in Chrome and Edge but for some reason doesnt work well in IE.
Screenshots attached below.
Image in IE
Image in Chrome
Any help would be highly appreciated.
Code for the search box and the search text button:
.search-box {
position: absolute;
top: 260px;
left: 46%;
transform: translate(-50%, -50%);
background: #2f3640;
height: 60px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover > .search-text {
width: 350px;
padding: 0 6px;
}
.search-box:hover > .search-btn {
background: white;
}
.search-btn {
color: #e84118;
float: right;
width: 40px;
height: 40px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
transition: 1s;
}
.search-text {
font-family: VFRegular;
border: 1px red solid;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;
line-height: 40px;
width: 0px;
}
/*
.search-box:hover ~ .category-box {
width: 400px;
opacity: 1;
visibility: visible;
}
.category-box:hover {
width: 400px;
opacity: 1;
visibility: visible;
}
.category-box {
position: absolute;
align-items: center;
top: 38%;
left: 50%;
text-decoration-color: white;
transform: translate(-50%, -50%);
background: #2f3640;
height: 60px;
border-radius: 40px;
padding: 10px;
width: 0px;
color: white;
visibility: collapse;
opacity: 0;
transition: width 1s, height 1s, transform 1s;
transition: opacity 1s;
}
*/
.search-box > ul {
left: -100px;
background-color: #2f3640;
color: white;
border-radius: 10px;
list-style-type: none;
font-size: 15px;
}
.search-box > ul li {
left: -10px;
margin: 0 0 10px 0;
border-bottom: 1px solid white;
z-index: 1;
}
.search-box > ul li:last-child {
margin: 0 0 10px 0;
border-bottom: 1px solid transparent;
}
.search-box > ul li:hover {
color: red;
}
<div class="entire-searchbox">
<div class="search-box">
<input class="search-text" type="text" placeholder="Type to search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
<ul id="testListDummy">
</ul>
</div>
</div>

Can you set 400px in .search-box class should be work

Try to add the height property for the .search-text, code as below:
.search-text {
font-family: VFRegular;
border: 1px red solid;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;
line-height: 40px;
width: 0px;
height:58px;
}
The output as below:

Set focus to textinput after transition ended

Is there a way to set the focus - so that typing automatically goes into the text input field - after a transition ended? I want then the user types the keyboard inputto go automatically go into the textinput field. If possible, can one do it with CSS only? Or is JavaScript (no jQuery!) needed?
Something like
document.getElementByClassName('text-input').focus();
doesn't do it.
<div class="wrapper">
<div class="element"></div>
<input class="text-input" type="text" name="search" />
</div>
.wrapper {
height: 40px;
width: 75px;
border-style: solid;
border-width: 2px;
border-radius: 40px;
border-color: red;
display: flex;
align-items: center;
padding-left:30px;
-webkit-transition: width 0.4s ease-in-out;
box-sizing:border-box;
}
.element {
background-color: hotpink;
width: 10px;
height: 10px;
}
.wrapper:hover {
width: 100%;
}
.text-input {
max-width: 0;
float: left;
padding: 0px;
border: 0px transparent;
-webkit-transition:max-width 0.6s ease-in-out;
transition:max-width 0.6s ease-in-out;
}
.wrapper:hover .text-input {
max-width: 50%;
padding: 2px;
border: 1px solid #d4d4d4;
}
Here is a codepen
https://codepen.io/anon/pen/MqjmQz

I see other solutions, it's better to use transitionend event listener. Just adding one more way to do so. Please have a look.
JS:
var txtInput = document.querySelector('.text-input');
txtInput.addEventListener("transitionend", function(e){
document.getElementById('inputField').focus();
}, false)
https://codepen.io/anon/pen/MqjmQz

Here you go. Pure JS Solution
document.getElementById("wrapper").onmouseover = function()
{
setTimeout(function(){mouseOver()},600)
};
function mouseOver(){
document.getElementById('inputField').focus();
}
.wrapper {
height: 40px;
width: 75px;
border-style: solid;
border-width: 2px;
border-radius: 40px;
border-color: red;
display: flex;
align-items: center;
padding-left:30px;
-webkit-transition: width 0.4s ease-in-out;
box-sizing:border-box;
}
.element {
background-color: hotpink;
width: 10px;
height: 10px;
}
.wrapper:hover {
width: 100%;
}
.text-input {
max-width: 0;
float: left;
padding: 0px;
border: 0px transparent;
-webkit-transition:max-width 0.6s ease-in-out;
transition:max-width 0.6s ease-in-out;
}
.wrapper:hover .text-input {
max-width: 50%;
padding: 2px;
border: 1px solid #d4d4d4;
}
<div class="wrapper" id="wrapper">
<div class="element"></div>
<input class="text-input" id="inputField" type="text" name="search" />
</div>
Edit
You can also call a mouseout function so that whenever the cursor goes out, the field get blur.
document.getElementById("wrapper").onmouseover = function()
{
setTimeout(function(){mouseOver()},600)
};
document.getElementById("wrapper").onmouseleave = function()
{
mouseOut()
};
function mouseOver(){
document.getElementById('inputField').focus();
}
function mouseOut(){
document.getElementById('inputField').blur();
}
.wrapper {
height: 40px;
width: 75px;
border-style: solid;
border-width: 2px;
border-radius: 40px;
border-color: red;
display: flex;
align-items: center;
padding-left:30px;
-webkit-transition: width 0.4s ease-in-out;
box-sizing:border-box;
}
.element {
background-color: hotpink;
width: 10px;
height: 10px;
}
.wrapper:hover {
width: 100%;
}
.text-input {
max-width: 0;
float: left;
padding: 0px;
border: 0px transparent;
-webkit-transition:max-width 0.6s ease-in-out;
transition:max-width 0.6s ease-in-out;
}
.wrapper:hover .text-input {
max-width: 50%;
padding: 2px;
border: 1px solid #d4d4d4;
}
<div class="wrapper" id="wrapper">
<div class="element"></div>
<input class="text-input" id="inputField" type="text" name="search" />
</div>

There's no such feature I fear, but as you know how long the transition take (0.6s) you can use a setTimeout.
var wrapper = document.querySelector('.wrapper');
wrapper.addEventListener('mouseover', function() {
setTimeout(function() {
wrapper.classList.add('focus');
document.querySelector('.text-input').focus();
}, 600)
});
Then you need some CSS changes to prevent shrink when mouse goes out.
.wrapper {
height: 40px;
width: 75px;
border-style: solid;
border-width: 2px;
border-radius: 40px;
border-color: red;
display: flex;
align-items: center;
padding-left:30px;
-webkit-transition: width 0.4s ease-in-out;
box-sizing:border-box;
}
.element {
background-color: hotpink;
width: 10px;
height: 10px;
}
.wrapper:hover,
.wrapper.focus {
width: 100%;
}
.text-input {
max-width: 0;
float: left;
padding: 0px;
border: 0px transparent;
-webkit-transition:max-width 0.6s ease-in-out;
transition:max-width 0.6s ease-in-out;
}
.wrapper:hover .text-input,
.wrapper.focus .text-input{
max-width: 50%;
padding: 2px;
border: 1px solid #d4d4d4;
}
https://codepen.io/lucafbb/pen/Eegmrx?editors=1111

Selected text fades away in a 640px or less viewport

I have a page that if you click one of the boxes shown in my snippet, a checkmark shows up and the content inside of shows as if it is active after you move the mouse away from it. However, when viewed with a viewport of 640px or less, the text inside of the boxes fades away after you select it and select something else. It is not doing this in a normal desktop view, so why is it doing it withing that specific media query? I did not make any changes to my .box-focused css in the media query at all, nor did I even include it because I wanted everything the same.
Does anyone see what it is that is causing this to happen?
$('.project-option-boxes').click(function() {
$(this).hide().toggleClass('box_focused').fadeIn('slow');
});
#project-scope-container {
margin-top: 70px;
margin-left: 9%;
width: 75%;
height: 300px;
}
.project-option-boxes {
display: inline-block;
border: 1px solid #45ba95;
padding: 20px 0px;
margin: 12px 20px 12px 0px;
width: 30%;
text-align: center;
font-size: 1.2em;
color: #45ba95;
cursor: pointer;
transition: ease-in-out .5s;
}
.project-option-boxes:hover {
background-color: #45ba95;
color: #FFF;
transition: ease-in-out .5s;
}
.box_focused {
background-color: #45ba95;
color: #FFF;
background-image : url("http://optimumwebdesigns.com/icons/white_checkmark.png");
background-position: left center;
background-repeat: no-repeat;
background-size: 20px 20px;
background-position: 5% 50%;
}
#media screen and (max-width:640px) {
.project-option-boxes {
display: block;
border: 1px solid #45ba95;
padding: 20px 0px;
margin: 15px 0px 15px 0px;
width: 85%;
text-align: center;
font-size: 1.2em;
color: #45ba95;
cursor: pointer;
}
.project-option-boxes:hover {
background-color: #45ba95;
color: #FFF;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="project-scope-container">
<div id="project-scope-title">PROJECT SCOPE</div>
<div class="project-option-boxes">BRANDING & IDENTITY</div>
<div class="project-option-boxes">WEB DESIGN</div>
<div class="project-option-boxes">RESPONSIVE/MOBILE</div>
<div class="project-option-boxes">MARKETING ASSETS</div>
<div class="project-option-boxes">HTML5 ANIMATION</div>
<div class="project-option-boxes">SEO OPTIMIZATION</div>
<div class="project-option-boxes">MONTHLY SUPPORT</div>
<div class="project-option-boxes">WEB DEVELOPMENT</div>
<div class="project-option-boxes">ECOMMERCE</div>
</div>

You aren't setting the colours correctly for the focused styles in the media query. See my addition of the box_focused class to the media query below.
$('.project-option-boxes').click(function() {
$(this).hide().toggleClass('box_focused').fadeIn('slow');
});
#project-scope-container {
margin-top: 70px;
margin-left: 9%;
width: 75%;
height: 300px;
}
.project-option-boxes {
display: inline-block;
border: 1px solid #45ba95;
padding: 20px 0px;
margin: 12px 20px 12px 0px;
width: 30%;
text-align: center;
font-size: 1.2em;
color: #45ba95;
cursor: pointer;
transition: ease-in-out .5s;
}
.project-option-boxes:hover {
background-color: #45ba95;
color: #FFF;
transition: ease-in-out .5s;
}
.box_focused {
background-color: #45ba95;
color: #FFF;
background-image : url("http://optimumwebdesigns.com/icons/white_checkmark.png");
background-position: left center;
background-repeat: no-repeat;
background-size: 20px 20px;
background-position: 5% 50%;
}
#media screen and (max-width:640px) {
.project-option-boxes {
display: block;
border: 1px solid #45ba95;
padding: 20px 0px;
margin: 15px 0px 15px 0px;
width: 85%;
text-align: center;
font-size: 1.2em;
color: #45ba95;
cursor: pointer;
}
.project-option-boxes:hover, .box_focused {
background-color: #45ba95;
color: #FFF;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="project-scope-container">
<div id="project-scope-title">PROJECT SCOPE</div>
<div class="project-option-boxes">BRANDING & IDENTITY</div>
<div class="project-option-boxes">WEB DESIGN</div>
<div class="project-option-boxes">RESPONSIVE/MOBILE</div>
<div class="project-option-boxes">MARKETING ASSETS</div>
<div class="project-option-boxes">HTML5 ANIMATION</div>
<div class="project-option-boxes">SEO OPTIMIZATION</div>
<div class="project-option-boxes">MONTHLY SUPPORT</div>
<div class="project-option-boxes">WEB DEVELOPMENT</div>
<div class="project-option-boxes">ECOMMERCE</div>
</div>

You have to have the same css settings copied into the media query for the same to apply. its because the scope limits what code is read
$('.project-option-boxes').click(function() {
$(this).hide().toggleClass('box_focused').fadeIn('slow');
});
#project-scope-container {
margin-top: 70px;
margin-left: 9%;
width: 75%;
height: 300px;
}
.project-option-boxes {
display: inline-block;
border: 1px solid #45ba95;
padding: 20px 0px;
margin: 12px 20px 12px 0px;
width: 30%;
text-align: center;
font-size: 1.2em;
color: #45ba95;
cursor: pointer;
transition: ease-in-out .5s;
}
.project-option-boxes:hover {
background-color: #45ba95;
color: #FFF;
transition: ease-in-out .5s;
}
.box_focused {
background-color: #45ba95;
color: #FFF;
background-image : url("http://optimumwebdesigns.com/icons/white_checkmark.png");
background-position: left center;
background-repeat: no-repeat;
background-size: 20px 20px;
background-position: 5% 50%;
}
#media screen and (max-width:640px) {
.project-option-boxes {
display: block;
border: 1px solid #45ba95;
padding: 20px 0px;
margin: 15px 0px 15px 0px;
width: 85%;
text-align: center;
font-size: 1.2em;
color: #45ba95;
cursor: pointer;
}
.project-option-boxes:hover {
background-color: #45ba95;
color: #FFF;
transition: ease-in-out .5s;
}
.box_focused {
background-color: #45ba95;
color: #FFF;
background-image : url("http://optimumwebdesigns.com/icons/white_checkmark.png");
background-position: left center;
background-repeat: no-repeat;
background-size: 20px 20px;
background-position: 5% 50%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="project-scope-container">
<div id="project-scope-title">PROJECT SCOPE</div>
<div class="project-option-boxes">BRANDING & IDENTITY</div>
<div class="project-option-boxes">WEB DESIGN</div>
<div class="project-option-boxes">RESPONSIVE/MOBILE</div>
<div class="project-option-boxes">MARKETING ASSETS</div>
<div class="project-option-boxes">HTML5 ANIMATION</div>
<div class="project-option-boxes">SEO OPTIMIZATION</div>
<div class="project-option-boxes">MONTHLY SUPPORT</div>
<div class="project-option-boxes">WEB DEVELOPMENT</div>
<div class="project-option-boxes">ECOMMERCE</div>
</div>

We Keep Coding

JavaScript is the programming language of the Web.

Netflix-like hover effect with buttons [closed] - javascript

Related

Alignment Fix in html/css

Button with hidden input

Issue with CSS Text box rendering in IE

Set focus to textinput after transition ended

Selected text fades away in a 640px or less viewport

Categories

Resources