Freezy
Reputation: 146
when hover the background and/or border must expand a little on right and left
I made a page, but I want to make when you hover the div with the specific movie, to appear a backgorund with border I think like this: https://i.sstatic.net/F4C1A.png - you can see on the left is when you hover the movie and on right is when is not hovering
Bassically I did something pretty simillar but i don't know why on the side (right/left) the border/background is not extended). I've tried to put something like this: with border-right/left 10px but nothing is happening
.item:hover {
background-color: var(--box-bg);
border: solid var(--box-bg);
border-radius: 3px;
border-right: 10px;
border-left: 10px;
box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}
Here is my code
@import url(https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;600;700;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Signika:wght@300&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap);
:root {
--main-color: #4D6275;
--second-color: #3F5060;
--body-bg: #2E3841;
--box-bg: #272F37;
--text-color: #D5D5D5;
--grey-color: #B2B2B2;
--simple-color: #C3C3C3;
--content-height: 92px;
--space-top: 30px;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: var(--body-bg);
color: var(--text-color);
}
a {
text-decoration: none !important;
}
button:focus {
outline: none;
}
.wrapper {
position: relative;
width: auto;
height: 100vh;
padding: 15px;
font-size: 1.1em;
top: 0;
}
.main-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: var(--body-bg);
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
color: var(--text-color);
height: var(--content-height);
border-bottom: 2px solid #3B4651;
}
.nav-menu {
list-style-type: none;
display: flex;
align-items: center;
margin-top: 5px;
margin-left: 170px;
font-size: 20px;
}
.nav-menu li ~ li {
margin-left: 50px;
}
.nav-menu li a {
color: var(--text-color);
}
.nav-menu li a:hover {
color: var(--grey-color);
}
.nav-menu li a i {
padding-left: 3.5px;
font-size: 15px;
}
.nav-options {
list-style-type: none;
display: flex;
align-items: center;
padding-top: 0 20px;
font-size: 20px;
}
.nav-search {
margin-right: 50px;
}
.nav-account {
margin-right: 50px;
}
.box-account {
margin-top: 10px;
background-color: var(--main-color);
border-radius: 3px;
width: 150px;
height: 40px;
transition: 0.3s ease-in-out;
box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}
.box-account-name {
text-align: left;
padding-left: 20px;
padding-top: 2.5px;
font-size: 20px;
}
/*
.box-account-name i {
float: right;
margin-top: 8px;
margin-right: 10px;
font-size: 15px;
}
*/
.nav-account-avatar-display {
width: 32px;
height: 32px;
float: right;
margin-top: 3.5px;
margin-right: 10px;
border-radius: 50%;
}
.nav-account a {
color: var(--text-color);
}
.box-account:hover {
background-color: #3F5160;
transform: translateY(-10%);
}
.nav-search {
margin-top: 5px;
}
.nav-search a {
color: var(--text-color);
}
.main-sidebar {
position: fixed;
top: 0;
left: 0;
width: 110px;
height: 100%;
background-color: var(--box-bg);
box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}
.sidebar-logo {
top: 0;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
}
.sidebar-item {
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
}
.sidebar-item-title {
font-size: 15px;
font-weight: 500;
}
.sidebar-item i {
font-size: 30px;
}
.sidebar-item:hover {
background-color: #313A44;
}
.sidebar-logo:hover {
background-color: var(--box-bg);
}
.sidebar-item a {
color: var(--grey-color)
}
.sidebar-logo img {
width: 50px;
}
.content-wrapper {
margin-top: 110px;
margin-left: 170px;
}
.header-menu {
display: flex;
/*align-items: flex-start;*/
/*justify-content: left;*/
font-size: 18px;
}
.header-item ~ .header-item {
margin-left: 100px;
}
li.active {
border-bottom: 2.5px solid #E3AA1E;
}
li.active a {
color: #E2E2E2;
}
.header-item a {
color: #9f9f9f;
}
.content-wrapper li {
list-style-type: none;
}
.list-menu {
display: flex;
flex-wrap: wrap;
}
.item {
width: 18%;
padding-top: 20px;
padding-bottom: 30px;
margin-right: 30px;
}
.item:hover {
background-color: var(--box-bg);
border: solid var(--box-bg);
border-radius: 3px;
border-right: 10px;
border-left: 10px;
box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}
.item a {
color: unset;
}
.item img {
width: 300px;
height: 450px;
}
.movie-name {
font-weight: 500;
font-size: 14px;
white-space: normal;
width: 85%;
margin-top: 5px;
}
.movie-time {
margin-top: 3px;
color: #9F9F9F;
font-size: 13px;
font-weight: 500;
}
.movie-description {
margin-top: 3px;
font-size: 13px;
display: none;
}
@media only screen and (max-width: 1280px) {
html {
font-size: 14px;
}
.msg-login {
width: 800px;
}
.main-login {
width: 400px;
}
}
@media only screen and (max-width: 850px) {
html {
font-size: 12px;
}
.msg-login {
width: 400px;
}
.main-login {
width: 250px;
}
.box_input_auth {
width: 150px;
}
.login_btn, .register_btn {
width: 200px;
}
.option_help {
margin-left: 50px;
display: flex;
font-size: 14px;
}
}
@media only screen and (max-width: 550px) {
html {
font-size: 10px;
}
.info-login-msg {
padding-top: 50px;
}
.msg-login {
width: 250px;
}
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css?">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- Ionicons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css?">
<!-- Load sweetalert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
<!-- Google Font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
<div class="wrapper">
<div class="main-nav">
<div class="nav">
<ul class="nav-menu">
<li class="nav-item"><a href="#">Prime <i class="fa fa-chevron-down"></i></a></li>
<li class="nav-item"><a href="#">Movies <i class="fa fa-chevron-down"></i></a></li>
<li class="nav-item"><a href="#">Series <i class="fa fa-chevron-down"></i></a></li>
</ul>
<ul class="nav-options">
<li class="nav-search">
<a href="#"><i class="fa fa-search"></i></a>
</li>
<li class="nav-account">
<a href="#">
<div class="box-account">
<div class="box-account-name">
<span class="name-account-nav">myAccName</span>
<img src="https://i.pinimg.com/474x/02/3e/eb/023eebc4bcee84dda420da10d3fe1c91.jpg" class="nav-account-avatar-display">
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="main-sidebar">
<div class="sidebar">
<ul class="sidebar-menu">
<li class="sidebar-logo">
<a href="#">
<img src="{{ asset('assets/img/amazon-logo.png') }}">
</a>
</li>
<li class="sidebar-item">
<a href="#">
<div class="above-text-icon"><i class="fa fa-television"></i></div>
<span class="sidebar-item-title">Explore</span>
</a>
</li>
<li class="sidebar-item">
<a href="#">
<div class="above-text-icon"><i class="fa fa-list"></i></div>
<span class="sidebar-item-title">Watchlist</span>
</a>
</li>
<li class="sidebar-item">
<a href="#">
<div class="above-text-icon"><i class="fa fa-heart"></i></div>
<span class="sidebar-item-title">Favorites</span>
</a>
</li>
<li class="sidebar-item">
<a href="#">
<div class="above-text-icon"><i class="fa fa-caret-square-o-right"></i></div>
<span class="sidebar-item-title">Continue</span>
</a>
</li>
<li class="sidebar-item">
<a href="#">
<div class="above-text-icon"><i class="fa fa-history"></i></div>
<span class="sidebar-item-title">History</span>
</a>
</li>
<li class="sidebar-item">
<a href="#">
<div class="above-text-icon"><i class="fa fa-ticket"></i></div>
<span class="sidebar-item-title">Help</span>
</a>
</li>
</ul>
</div>
</div>
<div class="content-wrapper">
<div class="content-header">
<ul class="header-menu">
<li class="header-item"><a href="#">Popular</a></li>
<li class="header-item active"><a href="#">New Releases</a></li>
<li class="header-item"><a href="#">Recently Added</a></li>
<li class="header-item"><a href="#">Recommanded</a></li>
</ul>
</div>
<div class="list-menu">
<div class="item">
<a href="#">
<img src="https://static.cinemagia.ro/img/db/movie/57/79/55/captain-america-the-winter-soldier-640466l.jpg" alt="">
<div class="movie-name">Captain America: The First Avanger</div>
<div class="movie-time">2 hr, 5 min</div>
<div class="movie-description">2020<br>Action, Justice, Hero</div>
</a>
</div>
<div class="item">
<a href="#">
<img src="https://wallpapercave.com/wp/wp7248999.jpg" alt="">
<div class="movie-name">Batman</div>
<div class="movie-time">1 hr, 43 min</div>
<div class="movie-description">2021<br>Action, Justice, Hero</div>
</a>
</div>
<div class="item">
<a href="#">
<img src="https://i.pinimg.com/originals/fb/ff/84/fbff84ea4b51cf1524c2a95fdac2183e.jpg" alt="">
<div class="movie-name">The Flash</div>
<div class="movie-time">2 hr, 53 min</div>
<div class="movie-description">2017<br>Action, Justice, Hero</div>
</a>
</div>
<div class="item">
<a href="#">
<img src="https://m.media-amazon.com/images/M/MV5BODdkNGU0YmEtMzBkYy00ZjQzLTliMDAtMTRkMWZjMGZkMDhkXkEyXkFqcGdeQXVyMTEzNTMwNTk@._V1_.jpg" alt="">
<div class="movie-name">Arrow</div>
<div class="movie-time">1 hr, 59 min</div>
<div class="movie-description">2019<br>Action, Justice, Hero</div>
</a>
</div>
<div class="item">
<a href="#">
<img src="https://m.media-amazon.com/images/M/MV5BNGVjNWI4ZGUtNzE0MS00YTJmLWE0ZDctN2ZiYTk2YmI3NTYyXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_.jpg" alt="">
<div class="movie-name">Joker</div>
<div class="movie-time">2 hr, 48 min</div>
<div class="movie-description">2021<br>Action, Justice, Hero</div>
</a>
</div>
<div class="item">
<a href="#">
<img src="https://i0.wp.com/www.eastmojo.com/wp-content/uploads/2021/05/Radhe-Salman-Khan-Disha-Patani-Randeep-Hooda-1.jpg" alt="">
<div class="movie-name">Radhe</div>
<div class="movie-time">1 hr, 43 min</div>
<div class="movie-description">2016<br>Action, Justice, Hero</div>
</a>
</div>
<div class="item">
<a href="#">
<img src=https://m.media-amazon.com/images/M/MV5BYWQyZGQwMzktMjFhYS00MmZmLWI3ZDEtNzg3MzRmM2ZjMDc1XkEyXkFqcGdeQXVyODY5NzkyMjA@._V1_.jpg" alt="">
<div class="movie-name">Scooby-Doo: The Sowrd and The Scoob</div>
<div class="movie-time">1 hr, 25 min</div>
<div class="movie-description">2019<br>Action, Justice, Hero</div>
</a>
</div>
<div class="item">
<a href="#">
<img src="https://m.media-amazon.com/images/M/MV5BZWRhMzdhMzEtZTViNy00YWYyLTgxZmUtMTMwMWM0NTEyMjk3XkEyXkFqcGdeQXVyNTIzOTk5ODM@._V1_.jpg" alt="">
<div class="movie-name">X-MEN: Wolverine</div>
<div class="movie-time">2 hr, 46 min</div>
<div class="movie-description">2020<br>Action, Justice, Hero</div>
</a>
</div>
<div class="item">
<a href="#">
<img src="https://static.cinemagia.ro/img/db/movie/24/45/469/boss-level-566441l.jpg" alt="">
<div class="movie-name">Boss Level: Capcana timpului</div>
<div class="movie-time">1 hr, 45 min</div>
<div class="movie-description">2015<br>Action, Justice, Hero</div>
</a>
</div>
<div class="item">
<a href="#">
<img src="https://i.pinimg.com/originals/9c/01/5a/9c015ae8003bca7c85620cdfdbc44f99.jpg" alt="">
<div class="movie-name">White House Down</div>
<div class="movie-time">1 hr, 55 min</div>
<div class="movie-description">2021<br>Action, Justice, Hero</div>
</a>
</div>
<div class="item">
<a href="#">
<img src="https://m.media-amazon.com/images/M/MV5BMTY1ODY2MTgwM15BMl5BanBnXkFtZTgwOTY3Nzc3NzE@._V1_.jpg" alt="">
<div class="movie-name">London Has Fallen</div>
<div class="movie-time">1 hr, 43 min</div>
<div class="movie-description">2021<br>Action, Justice, Hero</div>
</a>
</div>
<div class="item">
<a href="#">
<img src="https://flxt.tmsimg.com/assets/p9568543_p_v10_aw.jpg" alt="">
<div class="movie-name">Olympus Has Fallen</div>
<div class="movie-time">1 hr, 43 min</div>
<div class="movie-description">2018<br>Action, Justice, Hero</div>
</a>
</div>
<div class="item">
<a href="#">
<img src="https://m.media-amazon.com/images/M/MV5BZmYzMzU4NjctNDI0Mi00MGExLWI3ZDQtYzQzYThmYzc2ZmNjXkEyXkFqcGdeQXVyMTEyMjM2NDc2._V1_UY1200_CR90,0,630,1200_AL_.jpg" alt="">
<div class="movie-name">Godzilla vs Kong</div>
<div class="movie-time">1 hr, 43 min</div>
<div class="movie-description">2021<br>Action, Justice, Hero</div>
</a>
</div>
<div class="item">
<a href="#">
<img src="https://m.media-amazon.com/images/M/MV5BZDFiZTE4NWEtMGNkNC00YjhlLTk0YjMtNDA3NWRhMjc3MTM2XkEyXkFqcGdeQXVyOTA5NzQ0MDQ@._V1_.jpg" alt="">
<div class="movie-name">The Ice Road</div>
<div class="movie-time">1 hr, 42 min</div>
<div class="movie-description">2021<br>Action, Justice, Hero</div>
</a>
</div>
<div class="item">
<a href="#">
<img src="https://m.media-amazon.com/images/M/MV5BNGNiNWQ5M2MtNGI0OC00MDA2LWI5NzEtMmZiYjVjMDEyOWYzXkEyXkFqcGdeQXVyMjM4NTM5NDY@._V1_.jpg" alt="">
<div class="movie-name">The Shape Of Water</div>
<div class="movie-time">1 hr, 43 min</div>
<div class="movie-description">2021<br>Action, Justice, Hero</div>
</a>
</div>
</div>
</div>
</div>Upvotes: 0
Views: 51
Answers (1)
Gulshan Aggarwal
Reputation: 999
After figuring out your css--
- You should put item width auto rather than 18%.
- Give a different color to your border rather than same to background for a clear understanding(Optional).
Replace your CSS with the code below
@import url(https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;600;700;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Signika:wght@300&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap);
:root {
--main-color: #4D6275;
--second-color: #3F5060;
--body-bg: #2E3841;
--box-bg: #272F37;
--text-color: #D5D5D5;
--grey-color: #B2B2B2;
--simple-color: #C3C3C3;
--content-height: 92px;
--space-top: 30px;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: var(--body-bg);
color: var(--text-color);
}
a {
text-decoration: none !important;
}
button:focus {
outline: none;
}
.wrapper {
position: relative;
width: auto;
height: 100vh;
padding: 15px;
font-size: 1.1em;
top: 0;
}
.main-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: var(--body-bg);
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
color: var(--text-color);
height: var(--content-height);
border-bottom: 2px solid #3B4651;
}
.nav-menu {
list-style-type: none;
display: flex;
align-items: center;
margin-top: 5px;
margin-left: 170px;
font-size: 20px;
}
.nav-menu li ~ li {
margin-left: 50px;
}
.nav-menu li a {
color: var(--text-color);
}
.nav-menu li a:hover {
color: var(--grey-color);
}
.nav-menu li a i {
padding-left: 3.5px;
font-size: 15px;
}
.nav-options {
list-style-type: none;
display: flex;
align-items: center;
padding-top: 0 20px;
font-size: 20px;
}
.nav-search {
margin-right: 50px;
}
.nav-account {
margin-right: 50px;
}
.box-account {
margin-top: 10px;
background-color: var(--main-color);
border-radius: 3px;
width: 150px;
height: 40px;
transition: 0.3s ease-in-out;
box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}
.box-account-name {
text-align: left;
padding-left: 20px;
padding-top: 2.5px;
font-size: 20px;
}
/*
.box-account-name i {
float: right;
margin-top: 8px;
margin-right: 10px;
font-size: 15px;
}
*/
.nav-account-avatar-display {
width: 32px;
height: 32px;
float: right;
margin-top: 3.5px;
margin-right: 10px;
border-radius: 50%;
}
.nav-account a {
color: var(--text-color);
}
.box-account:hover {
background-color: #3F5160;
transform: translateY(-10%);
}
.nav-search {
margin-top: 5px;
}
.nav-search a {
color: var(--text-color);
}
.main-sidebar {
position: fixed;
top: 0;
left: 0;
width: 110px;
height: 100%;
background-color: var(--box-bg);
box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}
.sidebar-logo {
top: 0;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
}
.sidebar-item {
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
}
.sidebar-item-title {
font-size: 15px;
font-weight: 500;
}
.sidebar-item i {
font-size: 30px;
}
.sidebar-item:hover {
background-color: #313A44;
}
.sidebar-logo:hover {
background-color: var(--box-bg);
}
.sidebar-item a {
color: var(--grey-color)
}
.sidebar-logo img {
width: 50px;
}
.content-wrapper {
margin-top: 110px;
margin-left: 170px;
}
.header-menu {
display: flex;
/*align-items: flex-start;*/
/*justify-content: left;*/
font-size: 18px;
}
.header-item ~ .header-item {
margin-left: 100px;
}
li.active {
border-bottom: 2.5px solid #E3AA1E;
}
li.active a {
color: #E2E2E2;
}
.header-item a {
color: #9f9f9f;
}
.content-wrapper li {
list-style-type: none;
}
.list-menu {
display: flex;
flex-wrap: wrap;
}
.item {
width: auto;
padding-top: 20px;
padding-bottom: 30px;
margin-right: 30px;
}
.item:hover {
background-color: var(--box-bg);
border-radius: 3px;
border-right: 10px solid gold;
border-left: 10px solid gold;
box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}
.item a {
color: unset;
}
.item img {
width: 300px;
height: 450px;
}
.movie-name {
font-weight: 500;
font-size: 14px;
white-space: normal;
width: 85%;
margin-top: 5px;
}
.movie-time {
margin-top: 3px;
color: #9F9F9F;
font-size: 13px;
font-weight: 500;
}
.movie-description {
margin-top: 3px;
font-size: 13px;
display: none;
}
@media only screen and (max-width: 1280px) {
html {
font-size: 14px;
}
.msg-login {
width: 800px;
}
.main-login {
width: 400px;
}
}
@media only screen and (max-width: 850px) {
html {
font-size: 12px;
}
.msg-login {
width: 400px;
}
.main-login {
width: 250px;
}
.box_input_auth {
width: 150px;
}
.login_btn, .register_btn {
width: 200px;
}
.option_help {
margin-left: 50px;
display: flex;
font-size: 14px;
}
}
@media only screen and (max-width: 550px) {
html {
font-size: 10px;
}
.info-login-msg {
padding-top: 50px;
}
.msg-login {
width: 250px;
}
}Upvotes: 1
Related Questions
- CSS hover border makes elements adjust slightly
- CSS border width change on hover does not work as expected
- CSS hover effect. The border of the element is not covered
- Border Bottom left to right when Div Hover using CSS
- CSS border-bottom should extend when hover
- Problems with borders
- Hover effect goes out of border
- How to make hover full fit the border in leftside?
- Adding border on hover expands element
- Border appear on hover