Display rectangular image in quare from the center using CSS [closed]

Display rectangular image in quare from the center using CSS [closed] - html

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 4 years ago.
Improve this question
I had this piece of css/html code that shows 9 pictures. Some of the pictures might be rectangular, and i want them to be displayed in squares like other pictures. What css rules do i need to adjust? The structure of html is in the picture, so is the current css rules.
I had this piece of css/html code that shows 9 pictures. Some of the pictures might be rectangular, and i want them to be displayed in squares like other pictures. What css rules do i need to adjust? The structure of html is in the picture, so is the current css rules.
I had this piece of css/html code that shows 9 pictures. Some of the pictures might be rectangular, and i want them to be displayed in squares like other pictures. What css rules do i need to adjust? The structure of html is in the picture, so is the current css rules.
The code is attached below
#import url("https://fonts.googleapis.com/css?family=Montserrat");
#import url("https://fonts.googleapis.com/css?family=Open+Sans");
body, html {
width: 100%;
height: 100%;
font-family: "Montserrat";
color: #303633;
background-color: #C8D9E7;
overflow: hidden;
font-size: 1em;
font-style: normal;
-webkit-appearance: none;
outline: none;
text-rendering: geometricPrecision;
perspective: 1000px;
}
a {
position: relative;
display: inline-block;
padding: 12px 35px;
margin: 0 0 20px;
background-color: #e1306c;
color: white;
border-radius: 5px;
transition: all 0.3s;
letter-spacing: 2px;
font-size: 0.85em;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
box-shadow: 0 2px 30px rgba(225, 48, 108, 0.4);
}
a:hover {
background-color: #e75d8c;
}
.content-wrapper {
width: 300px;
max-height: 530px;
border-radius: 5px;
box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);
background: #fbfcee;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow-y: scroll;
overflow-x: hidden;
text-align: center;
}
.content-wrapper::-webkit-scrollbar {
display: none;
}
.content-wrapper .img {
width: 302px;
height: 350px;
position: relative;
overflow: hidden;
}
.content-wrapper .img::after {
content: "";
display: block;
position: absolute;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(88, 81, 219, 0.25), transparent);
}
.content-wrapper img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
object-fit: contain;
}
.profile--info {
text-align: left;
padding-top: 10px;
}
.profile--info span {
font-family: "Open Sans", "Adobe Blank";
z-index: 1;
left: 15px;
top: 15px;
font-size: 0.575em;
color: rgba(84, 95, 89, 0.75);
display: block;
}
.profile--info span.username {
font-weight: 700;
font-style: normal;
font-size: 1em;
color: black;
}
.profile--info span.userquote {
margin-top: -15px;
font-size: 0.7em;
color: rgba(84, 95, 89, 0.75);
}
.user {
background-color: white;
width: 100%;
margin-top: 0;
max-height: 600px;
position: relative;
padding: 0 30px;
box-sizing: border-box;
}
.user-social-wrapper {
display: flex;
justify-content: space-around;
position: relative;
padding: 5px 0;
padding-bottom: 15px;
}
.user-social-wrapper::after, .user-social-wrapper::before {
content: "";
display: block;
position: absolute;
top: 0;
width: 100%;
height: 1px;
}
.user-social-wrapper::before {
top: initial;
bottom: 0;
}
.user-social-wrapper .user-info {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-weight: 200;
flex: 1 1;
}
.user-social-wrapper .user-info span:first-child {
font-size: 1.25em;
}
.user-social-wrapper .user-info span:last-child {
font-size: 0.75em;
color: rgba(84, 95, 89, 0.75);
}
.shots {
width: calc(100% + 60px);
margin-left: -30px;
position: relative;
display: flex;
flex-wrap: wrap;
}
.shots .shot {
overflow: hidden;
position: relative;
width: 100px;
height: 100px;
}
.shots .shot::after {
content: "";
display: block;
opacity: 0;
transition: all 0.255s;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.shots .shot img {
transition: all 0.255s;
width: 102px;
}
#keyframes drift {
from {
transform: rotate(0deg);
}
from {
transform: rotate(360deg);
}
}
<div class="content-wrapper">
<div class="user">
<div class="shots">
<div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/c2daebf39514481b7bdd696df185794a/5CB41E95/t51.2885-15/e35/44305549_353634695394272_4379074065337998962_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&se=7&ig_cache_key=MTkxMjA0MDQ0OTAyMTY1Njc4Mg%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/c079f9938e0004cd465e9b3a23823638/5CB841C6/t51.2885-15/e35/41336764_2309590515939856_3014107714986624367_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&se=7&ig_cache_key=MTg3Nzg1Mjk1Njk0NDkwNTAwMg%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/4c03bcf4125a52da4db64348fded2e64/5CD059B2/t51.2885-15/e35/46699770_789255231412285_7247415646102729111_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&se=7&ig_cache_key=MTkyMjcyMTIwOTQyODk0Mjc5NQ%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/2ddf693641bf3e4dad7f0e4113196ed3/5C9D1D98/t51.2885-15/e35/42593422_668756993510074_548785136612309253_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&se=7&ig_cache_key=MTg4MjI5MDk5MzYyODEwOTk0Mw%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/293669652704407f1519034a237110fc/5CD53EA6/t51.2885-15/e35/44442144_2039456152959656_8454847146314760657_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&se=7&ig_cache_key=MTkxMTEwMTUwMTEzOTEzMzk4MA%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/0a8c6666eeaace1c7eff30c25aa672c6/5CD46203/t51.2885-15/e35/43816352_986229031581012_2433270463824730761_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&se=7&ig_cache_key=MTg5NTQwODg2MDE5NjA5OTA1NQ%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/7841eff64f571f60c9ec1d169158851e/5C9BD445/t51.2885-15/e35/43621864_2280294755587222_1177965970195440793_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&se=7&ig_cache_key=MTg4NjY0MTkwODQ0MTE4MDcyOQ%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/a78a72efb59d50ceeae8e6bcbaa82f92/5CCFD742/t51.2885-15/e35/42927631_265838184102659_8658034749053379565_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&se=7&ig_cache_key=MTkxNjkzMDk2MDM3NTMwNTUzOA%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/77a032f68b948ae7049ea644777fc393/5CB3E901/t51.2885-15/e35/41866047_1814622118587789_2219135764187038727_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&se=7&ig_cache_key=MTg4NDI5OTEwNzU1ODU4OTEzMg%3D%3D.2"></div>
</div>
<div class="profile--info"><span class="username">ʏɪɴʀᴜɪ ᴅᴇɴɢ</span><span>☺#bobby_dyr</span><br><span class="userquote">In 2018, ʏɪɴʀᴜɪ ᴅᴇɴɢ received 164❤️, 7✉️ per post by average, and a total of</span></div>
<div class="user-social-wrapper">
<div class="user-info user-posts"><span>104</span><span>Shots</span></div>
<div class="user-info user-followers"><span>16,963</span><span>Likes</span></div>
<div class="user-info user-following"><span>643</span><span>Comments</span></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/f09496b7cc.js"></script>
<script src="js/index.js"></script>
</div>

The following styles are enough to make your images fit:
.content-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
}
Don't forget to set height and width to 100%.
#import url("https://fonts.googleapis.com/css?family=Montserrat");
#import url("https://fonts.googleapis.com/css?family=Open+Sans");
body, html {
width: 100%;
height: 100%;
font-family: "Montserrat";
color: #303633;
background-color: #C8D9E7;
overflow: hidden;
font-size: 1em;
font-style: normal;
-webkit-appearance: none;
outline: none;
text-rendering: geometricPrecision;
perspective: 1000px;
}
a {
position: relative;
display: inline-block;
padding: 12px 35px;
margin: 0 0 20px;
background-color: #e1306c;
color: white;
border-radius: 5px;
transition: all 0.3s;
letter-spacing: 2px;
font-size: 0.85em;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
box-shadow: 0 2px 30px rgba(225, 48, 108, 0.4);
}
a:hover {
background-color: #e75d8c;
}
.content-wrapper {
width: 300px;
max-height: 530px;
border-radius: 5px;
box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);
background: #fbfcee;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow-y: scroll;
overflow-x: hidden;
text-align: center;
}
.content-wrapper::-webkit-scrollbar {
display: none;
}
.content-wrapper .img {
width: 302px;
height: 350px;
position: relative;
overflow: hidden;
}
.content-wrapper .img::after {
content: "";
display: block;
position: absolute;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(88, 81, 219, 0.25), transparent);
}
.content-wrapper img {
/*
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
object-fit: contain;
*/
width: 100%;
height: 100%;
object-fit: cover;
}
.profile--info {
text-align: left;
padding-top: 10px;
}
.profile--info span {
font-family: "Open Sans", "Adobe Blank";
z-index: 1;
left: 15px;
top: 15px;
font-size: 0.575em;
color: rgba(84, 95, 89, 0.75);
display: block;
}
.profile--info span.username {
font-weight: 700;
font-style: normal;
font-size: 1em;
color: black;
}
.profile--info span.userquote {
margin-top: -15px;
font-size: 0.7em;
color: rgba(84, 95, 89, 0.75);
}
.user {
background-color: white;
width: 100%;
margin-top: 0;
max-height: 600px;
position: relative;
padding: 0 30px;
box-sizing: border-box;
}
.user-social-wrapper {
display: flex;
justify-content: space-around;
position: relative;
padding: 5px 0;
padding-bottom: 15px;
}
.user-social-wrapper::after, .user-social-wrapper::before {
content: "";
display: block;
position: absolute;
top: 0;
width: 100%;
height: 1px;
}
.user-social-wrapper::before {
top: initial;
bottom: 0;
}
.user-social-wrapper .user-info {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-weight: 200;
flex: 1 1;
}
.user-social-wrapper .user-info span:first-child {
font-size: 1.25em;
}
.user-social-wrapper .user-info span:last-child {
font-size: 0.75em;
color: rgba(84, 95, 89, 0.75);
}
.shots {
width: calc(100% + 60px);
margin-left: -30px;
position: relative;
display: flex;
flex-wrap: wrap;
}
.shots .shot {
overflow: hidden;
position: relative;
width: 100px;
height: 100px;
}
.shots .shot::after {
content: "";
display: block;
opacity: 0;
transition: all 0.255s;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.shots .shot img {
transition: all 0.255s;
width: 102px;
}
#keyframes drift {
from {
transform: rotate(0deg);
}
from {
transform: rotate(360deg);
}
}
<div class="content-wrapper">
<div class="user">
<div class="shots">
<div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/c2daebf39514481b7bdd696df185794a/5CB41E95/t51.2885-15/e35/44305549_353634695394272_4379074065337998962_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&se=7&ig_cache_key=MTkxMjA0MDQ0OTAyMTY1Njc4Mg%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/c079f9938e0004cd465e9b3a23823638/5CB841C6/t51.2885-15/e35/41336764_2309590515939856_3014107714986624367_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&se=7&ig_cache_key=MTg3Nzg1Mjk1Njk0NDkwNTAwMg%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/4c03bcf4125a52da4db64348fded2e64/5CD059B2/t51.2885-15/e35/46699770_789255231412285_7247415646102729111_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&se=7&ig_cache_key=MTkyMjcyMTIwOTQyODk0Mjc5NQ%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/2ddf693641bf3e4dad7f0e4113196ed3/5C9D1D98/t51.2885-15/e35/42593422_668756993510074_548785136612309253_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&se=7&ig_cache_key=MTg4MjI5MDk5MzYyODEwOTk0Mw%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/293669652704407f1519034a237110fc/5CD53EA6/t51.2885-15/e35/44442144_2039456152959656_8454847146314760657_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&se=7&ig_cache_key=MTkxMTEwMTUwMTEzOTEzMzk4MA%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/0a8c6666eeaace1c7eff30c25aa672c6/5CD46203/t51.2885-15/e35/43816352_986229031581012_2433270463824730761_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&se=7&ig_cache_key=MTg5NTQwODg2MDE5NjA5OTA1NQ%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/7841eff64f571f60c9ec1d169158851e/5C9BD445/t51.2885-15/e35/43621864_2280294755587222_1177965970195440793_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&se=7&ig_cache_key=MTg4NjY0MTkwODQ0MTE4MDcyOQ%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/a78a72efb59d50ceeae8e6bcbaa82f92/5CCFD742/t51.2885-15/e35/42927631_265838184102659_8658034749053379565_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&se=7&ig_cache_key=MTkxNjkzMDk2MDM3NTMwNTUzOA%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-sea1-1.cdninstagram.com/vp/77a032f68b948ae7049ea644777fc393/5CB3E901/t51.2885-15/e35/41866047_1814622118587789_2219135764187038727_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&se=7&ig_cache_key=MTg4NDI5OTEwNzU1ODU4OTEzMg%3D%3D.2"></div>
</div>
<div class="profile--info"><span class="username">ʏɪɴʀᴜɪ ᴅᴇɴɢ</span><span>☺#bobby_dyr</span><br><span class="userquote">In 2018, ʏɪɴʀᴜɪ ᴅᴇɴɢ received 164❤️, 7✉️ per post by average, and a total of</span></div>
<div class="user-social-wrapper">
<div class="user-info user-posts"><span>104</span><span>Shots</span></div>
<div class="user-info user-followers"><span>16,963</span><span>Likes</span></div>
<div class="user-info user-following"><span>643</span><span>Comments</span></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/f09496b7cc.js"></script>
<script src="js/index.js"></script>
</div>

object-fit: contain;
to
object-fit: cover;

Related

Why is my <Div> disappearing when I add Class to my <span> within it?

I'm trying to take a variable and display it on my html page via CSS for a Graphical display in OBS streaming software.
Every time I add the class .wrappers to the span id p1Name (as well as p2Name) the text disappears from the html output in OBS.
What is causing the text to disappear? As otherwise it perfectly is displayed when I don't include the class .wrappers
I've tried modifying overall page settings, the class specifications and moving the object itself but the text just seems to have disappeared.
Edit Changing the opacity within wrappers does not affect the visibility of the object
//Time stuff
let time = document.getElementById("current-time");
setInterval(() => {
let d = new Date();
time.innerHTML = d.toLocaleTimeString(navigator.language, {
hourCycle: 'h23',
hour: '2-digit',
minute: '2-digit'
});
}, 1000);
#font-face {
font-family: "Futura";
src: url('Resources/Fonts/Brandon_bld.otf');
}
* {
margin: 0;
padding: 0;
font-family: "Futura";
box-sizing: border-box;
overflow: hidden;
white-space: nowrap;
}
.graphicBox {
position: absolute;
width: 1800px;
height: 105px;
background: rgb(51, 116, 182);
background: linear-gradient(90deg, rgba(51, 116, 182, 0.75) 0%, rgba(110, 83, 180, 0.75) 70%);
border-radius: 15px;
bottom: 40px;
left: 50px;
filter: drop-shadow(-2px 2px 4px black);
}
.statusBox {
position: absolute;
font-family: "Futura";
font-weight: bold;
padding-top: 8px;
font-size: 40px;
width: 130px;
height: 70px;
background: rgb(231, 231, 231);
border-radius: 15px;
text-align: center;
bottom: 125px;
left: 100px;
filter: drop-shadow(-2px 2px 4px black);
}
.timeDisplay {
width: 140px;
height: 30px;
display: flex;
align-items: left;
justify-content: center;
position: absolute;
font-size: 14px;
color: white;
bottom: 58px;
left: 771px;
}
.timeZone {
width: 60px;
height: 20px;
display: flex;
align-items: left;
justify-content: space-between;
position: absolute;
font-size: 15px;
color: white;
bottom: 40px;
left: 812px;
}
.scoreboardP1 {
position: absolute;
left: 150px;
bottom: 60px;
width: 300px;
}
.scoreboardP2 {
position: absolute;
left: 450px;
bottom: 60px;
width: 300px;
}
.wrappers {
position: absolute;
width: 340px;
height: 100px;
line-height: 54px;
top: 356px;
opacity: 0;
color: black;
}
#p1Wrapper {
bottom: 540x;
left: 300px;
color: white;
}
#p2Wrapper {
width: 300px;
bottom: 20px;
left: 100px;
color: white;
}
.scoreDisplay {
position: absolute;
color: white;
width: 60px;
height: 60px;
align: center;
font-family: "Avant";
}
#p1Format {
top: 30px;
left: 1160px;
}
#p2Format {
top: 30px;
left: 1450px;
}
.scoreBox {
position: absolute;
width: 45px;
height: 45px;
background: white;
border-radius: 10px;
align: center;
}
#p1Box {
top: 28px;
left: 1150px;
}
#p2Box {
top: 28px;
left: 1440px;
}
<div class="graphicBox">
</div>
<div class="statusBox">
<p>NEXT</p>
</div>
<div class="timeDisplay">
<h1 id="current-time"></h1>
</div>
<div class="timeZone">
<p>EST</p>
</div>
<div id="overlayP1" class="scoreboardP1">
<span id="p1Wrapper" class="wrappers">
<span id="p1Name" class="names"></span>
</span>
</div>
<div class="scoreboardP2">
<span id="p2Wrapper">
<span id="p2Name" class="names"></span>
</span>
</div>

The problem seem to be two things in the CSS class .wrappers.
Because .wrappers has the property position: absolute, the element was disappearing out of the screen.
Also, with the propriety opacity: 0 the item is invisible.
So, by commenting out these elements in the CSS:
.wrappers {
/* position: absolute; */
width: 340px;
height: 100px;
line-height: 54px;
top: 356px;
/* opacity: 0; */
color: black;
}
I can now see both p1Name and p2Name when the parent span p1Wrapper and p2Wrapper have the wrappers class added to them, like this:
<span id="p1Wrapper" class="wrappers">
Also, just some quick notes:
align: center is not a valid CSS property.
While testing I added inside the p1Name span some words "testp2" so I could see the changes after formatting: <span id="p2Name" class="names">testp2</span>

How to hide the blue sphere behind the 'background', but over the edge of the 'container'

The design calls for the blue sphere to be behind the 'background', but over the edge of the container.
Design by Drippple artist Camila Cat: https://dribbble.com/Camila_cat
Code: First off my code is here:
https://codepen.io/misterhtmlcss/pen/VXxVvQ
I have no idea how to cover the exterior of the sphere that overlaps with the background, while allowing it (the sphere in the top left corner) to STILL cover the top left corner of the 'container'.
------ Structural HTML included here for simplicity -----
------ START HTML -----
<div class="container">
<div class="card">
<div class="top-border"> </div>
<div class="card-body"> </div>
</div>
<div class="top-left"></div>
</div>
------- End HTML ------
------- SCSS -------
* {
box-sizing: border-box;
}
$background: #eef1f8;
$card: rgb(253, 253, 253);
$shadow: 2px 2px 6px rgba(grey, 0.6);
$green: rgb(0, 216, 178);
$yellow: rgb(255, 213, 111);
$blue: rgb(0, 177, 250);
body {
background-color: white;
padding: 50px;
font-size: 12px;
font-family: Roboto, sans-serif;
font-weight: 300;
height: 100vh;
width: 100vw;
}
#container {
position: relative;
display: inline-block;
background-color: $background;
width: 850px;
padding: 100px 125px;
}
.card {
background-color: $card;
display: inline-block;
width: 650px;
position: relative;
.top-border {
height: 10px;
background-color: $green;
}
.card-body {
height: 330px;
.text {
position: absolute;
left: 100px;
top: 60px;
li {
position: relative;
top: 40px;
left: -40px;
}
}
}
}
.avatar {
position: absolute;
left: -70px;
top: 50%;
transform: translatey(-50%);
}
.qrcode {
position: absolute;
left: 450px;
top: 50%;
transform: translatey(-50%);
}
li {
font-size: 0.9rem;
font-weight: 400;
color: darkgrey;
line-height: 1.5;
list-style-type: none;
}
img {
height: 120px;
width: 120px;
border: 3px solid white;
}
.uppercase {
text-transform: uppercase;
}
h1,
h2 {
margin: 0;
padding: 0;
}
h1 {
font-size: 2.2rem;
font-weight: 900;
}
h2 {
font-size: 1.5rem;
font-weight: 300;
color: rgba(68, 68, 68, 0.6);
}
.top-left {
position: absolute;
left: -250px;
top: -250px;
width: 500px;
height: 350px;
background-color: $blue;
border-radius: 50%;
box-shadow: 5px 5px 150px rgb(173, 220, 239);
z-index: 5;
}
------- END SCSS -------

Do you want something like this?
I just hide outside portion of the top-left circle from container. overflow: hidden;
Codepen Link: https://codepen.io/vishnuprasad/pen/RMBYKv
#container {
position: relative;
display: inline-block;
background-color: $background;
width: 850px;
padding: 100px 125px;
overflow: hidden;
}
.top-left {
position: absolute;
left: -260px;
top: -260px;
width: 400px;
height: 400px;
background-color: #00b1fa;
border-radius: 100%;
box-shadow: 5px 5px 150px rgb(173, 220, 239);
z-index: 5;
}

link with icon in header alignment

My header is devided in 3 sections: left, center and right. The left section is empty. In the center section I have my page title and in the right section I placed an "Account" link with an icon next to it. The link contains the word ACCOUNT and an icon. the icon is somehow pushed to the top and leaves a blank space below it next to the word. I want them both in one line and on the same hight. How can I achieve this? I added a red background to make the problem better understandable.
html {
height: 100%;
box-sizing: border-box;
overflow: hidden;
}
*,
*:before,
*:after {
box-sizing: inherit;
overflow: inherit;
}
body {
background-color: #f5f5f5;
margin: 0;
padding: 0;
position: relative;
height: 100%;
}
#in {
width: 1000px;
margin-left: auto;
margin-right: auto;
height: 100%;
}
/* ------------------------------------------------------------------------ */
/* -------------------------------- HEADER -------------------------------- */
/* ------------------------------------------------------------------------ */
header {
background-color: #131b23;
border-bottom: 6px solid #0f151a;
text-align: center;
left: 0;
top: 0;
width: 100%;
height: 170px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
z-index: 99;
}
#left {
background-color: green;
width: 20%;
position: absolute;
height: 164px;
}
#center {
background-color: red;
width: 60%;
margin-left: auto;
margin-right: auto;
height: 100%;
position: absolute;
left: 20%;
right: 20%;
height: 164px;
}
#right {
background-color: blue;
width: 20%;
height: 100%;
position: absolute;
right: 0;
height: 164px;
}
#heading {
font-size: 60px;
display: block;
margin-bottom: -7px;
margin-top: 15px;
}
.accountlink {
font-family: "Helvetica";
text-decoration: none;
font-weight: 800;
color: #ffffff;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
background-color: red;
position: absolute;
right: 30px;
top: 15px;
}
.navigationicon {
position: relative;
width: 24px;
margin: 0;
padding: 0;
top: 50%;
bottom: 50%;
}
<header>
<div id="left">
</div>
<div id="center">
<h1 id="heading">My Page</h1>
</div>
<div id="right">
<a class="accountlink" href="login.html">Account <img class="navigationicon" src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-512.png"></a>
</div>
</header>

Can you check this ?
html {
height: 100%;
box-sizing: border-box;
overflow: hidden;
}
*,
*:before,
*:after {
box-sizing: inherit;
overflow: inherit;
}
body {
background-color: #f5f5f5;
margin: 0;
padding: 0;
position: relative;
height: 100%;
}
#in {
width: 1000px;
margin-left: auto;
margin-right: auto;
height: 100%;
}
/* ------------------------------------------------------------------------ */
/* -------------------------------- HEADER -------------------------------- */
/* ------------------------------------------------------------------------ */
header {
background-color: #131b23;
border-bottom: 6px solid #0f151a;
text-align: center;
left: 0;
top: 0;
width: 100%;
height: 170px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
z-index: 99;
}
#left {
background-color: green;
width: 20%;
position: absolute;
height: 164px;
}
#center {
background-color: red;
width: 60%;
margin-left: auto;
margin-right: auto;
height: 100%;
position: absolute;
left: 20%;
right: 25%;
height: 164px;
}
#right {
background-color: blue;
width: 20%;
height: 100%;
position: absolute;
right: 0;
height: 164px;
}
#heading {
font-size: 60px;
display: block;
margin-bottom: -7px;
margin-top: 15px;
}
.accountlink {
font-family: "Helvetica";
text-decoration: none;
font-weight: 800;
color: #ffffff;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
background-color: white;
position: absolute;
left: 50px;
top: 20px;
background: url("https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-512.png");
background-size: 24px;
background-repeat: no-repeat;
background-position-x: right;
background-position-y: 0px;
width: 40%;
line-height: 2;
}
<header>
<div id="left">
</div>
<div id="center">
<h1 id="heading">My Page</h1>
</div>
<div id="right">
<a class="accountlink" href="login.html">Account </a>
</div>
</header>

Four changes to your css code to get there: 2 at .navigationicon and 2 at .accountlink
.accountlink {
font-family: "Helvetica";
text-decoration: none;
font-weight: 800;
color: #ffffff;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
background-color: red;
position: absolute;
right: 80px;
top: 70px;
}
.navigationicon {
position: relative;
width: 12px;
margin: 0 0 2px -5px;
padding: 0;
top: 50%;
bottom: 50%;
}

Text over background image removes its hover state

I have this text on top of an image. When I hover on the text, the hover I created for the background image doesn't work. Would anyone have a solution for this?
JSfiddle:
https://jsfiddle.net/marineboudeau/h177pdne/4/
<div class="card">
<a href="#">
<div class="background-container">
<div class="background" style="background: url('https://unsplash.it/300/200/?random') no-repeat; background-size: cover; background-position: center;"></div>
</div>
</a>
<a href="#" class="headline link--no-decor">
<h2>Headline</h2>
</a>
</div>
And the CSS:
.card {
width: 300px;
height: 200px;
}
a {
text-decoration: none;
}
h2 {
color: white;
font-family: Helvetica, sans-serif;
}
h2:hover {
color: yellow;
}
.headline {
padding: 0 22px;
position: relative;
margin-top: -80px;
display: flex;
flex-direction: row;
align-items: center;
}
.background-container {
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
position: relative;
}
.background-container:after {
content: "gradient mask for image";
overflow: hidden;
position: absolute;
text-indent: -9999rem;
font-size: 0;
line-height: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(20deg ,rgba(0,0,0,.8), rgba(0,0,0,0));
}
.background-container:hover:after {
background: linear-gradient(20deg,rgba(255, 0, 0,.6),rgba(255, 255, 0,.6));
border: 2px solid red;
}
.background {
height: 200px;
}
Thanks!

Move <a href="#" class="headline link--no-decor"> into the backround element, so it won't block the hover event.
To prevent the .background-container:after from block the a.headline hover, we need to assign position: relative, and z-index: 1 to a.headline.
.card {
width: 300px;
height: 200px;
}
a {
text-decoration: none;
}
h2 {
color: white;
font-family: Helvetica, sans-serif;
}
h2:hover {
color: yellow;
}
.headline {
position: relative;
z-index: 1;
padding: 0 22px;
position: relative;
margin-top: -80px;
display: flex;
flex-direction: row;
align-items: center;
}
.background-container {
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
position: relative;
}
.background-container:after {
content: "gradient mask for image";
overflow: hidden;
position: absolute;
text-indent: -9999rem;
font-size: 0;
line-height: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(20deg ,rgba(0,0,0,.8), rgba(0,0,0,0));
}
.background-container:hover:after {
background: linear-gradient(20deg,rgba(255, 0, 0,.6),rgba(255, 255, 0,.6));
border: 2px solid red;
}
.background {
height: 200px;
}
<div class="card">
<a href="#">
<div class="background-container">
<div class="background" style="background: url('https://unsplash.it/300/200/?random') no-repeat; background-size: cover; background-position: center;"></div>
<a href="#" class="headline link--no-decor">
<h2>Headline</h2>
</a>
</div>
</a>
</div>

Istead of setting hover on the .background-container:hover:after add hover on this .card:hover selector and select background-cointainer like this .card:hover a .background-container:after
This should work,
.card:hover a .background-container:after {
background: linear-gradient(20deg,rgba(255, 0, 0,.6),rgba(255, 255, 0,.6));
border: 2px solid red;
}
Check out the full code
.card {
width: 300px;
height: 200px;
}
a {
text-decoration: none;
}
h2 {
color: white;
font-family: Helvetica, sans-serif;
}
h2:hover {
color: yellow;
}
.headline {
padding: 0 22px;
position: relative;
margin-top: -80px;
display: flex;
flex-direction: row;
align-items: center;
}
.background-container {
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
position: relative;
}
.background-container:after {
content: "gradient mask for image";
overflow: hidden;
position: absolute;
text-indent: -9999rem;
font-size: 0;
line-height: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(20deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));
}
.card:hover a .background-container:after {
background: linear-gradient(20deg, rgba(255, 0, 0, .6), rgba(255, 255, 0, .6));
border: 2px solid red;
}
.background {
height: 200px;
}
<div class="card">
<a href="#">
<div class="background-container">
<div class="background" style="background: url('https://unsplash.it/300/200/?random') no-repeat; background-size: cover; background-position: center;"></div>
</div>
</a>
<a href="#" class="headline link--no-decor">
<h2>Headline</h2>
</a>
</div>

CSS transition does not show when there's a background-color

I made a modal and it does not do the transition effect when I apply a background-color to my #main div which contains all the content, after removing the background the modal does do the transition effect and disappears slowly.
To ge the modal just click on register on the top navbar.
Live demo for the modal along with the background-color on #main:
http://79.179.201.217/
Live demo for the modal long without the background-color on #main:
http://79.179.201.217/test.php
Just to note that the following under #main causes the issue.
background-color: #eee;
CSS:
#main {
width: 85%;
max-width: 875px;
margin: 70px auto;
border-radius: 5px;
padding: 15px;
z-index: -600;
background-color: #eee;
}
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
z-index: -500;
transition: opacity 0.18s linear, transform 0.18s linear;
transform: scale(1.4);
opacity: 0;
}
.modal-close {
display: block;
color: #555;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
position: absolute;
top: 6px;
right: 20px;
}
.modal-content {
display: block;
margin-top: 10px;
}
.modal-container {
display: table;
margin: 220px auto;
position: relative;
border: 1px solid #eee;
background-color: #eee;
padding: 25px;
border-radius: 3px;
box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .5);
}
.modal-container.x2 {
width: 80%;
max-width: 200px;
}
.modal-container.x3 {
width: 80%;
max-width: 300px;
}
.modal-container.x4 {
width: 80%;
max-width: 400px;
}
.modal-container.x5 {
width: 80%;
max-width: 500px;
}
.modal-container.x6 {
width: 80%;
max-width: 600px;
}
.modal-container.x7 {
width: 80%;
max-width: 700px;
}
.modal-container.x8 {
width: 80%;
max-width: 800px;
}
.modal-header {
margin-bottom: 20px;
border-bottom: 1px solid gray;
font-size: 18px;
color: #555555;
font-weight: 500;
text-transform: uppercase;
}
.modal.modal-visible {
opacity: 1;
z-index: 1000000;
transform: scale(1.0);
}

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

Display rectangular image in quare from the center using CSS [closed] - html

object-fit: contain; to object-fit: cover;

Related

Why is my <Div> disappearing when I add Class to my <span> within it?

How to hide the blue sphere behind the 'background', but over the edge of the 'container'

link with icon in header alignment

Text over background image removes its hover state

CSS transition does not show when there's a background-color

Categories

Resources