I am trying to negative positioning an absolute simple element. It works fine in ALL browser except in Firefox. The blue handler box should be positionned in the middle of top border instead as you can see on Chrome, IE or Safari. Is there any turnaround to fix this issue with Firefox.
Any help would be appreciated.
body {
padding-top: 10em
}
[draggable] {
outline: 1px dashed #0099FF;
cursor: move;
position: relative
}
.handler {
width: 34px;
height: 16px;
background-color: #0099FF;
margin: 0 auto;
position: absolute;
top: -8px;
left: 0;
right: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<section id="services">
<div class="container">
<div class="row">
<div draggable="true" class="parent col-lg-12 text-center">
<h2 class="section-heading">Services</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
<div class="handler"></div>
</div>
</div>
</div>
</section>
Use border instead of using outline.
body {
padding-top: 10em
}
[draggable] {
/* Use border */
border: 1px dashed #0099FF;
cursor: move;
position: relative
}
.handler {
width: 34px;
height: 16px;
background-color: #0099FF;
margin: 0 auto;
position: absolute;
top: -8px;
left: 0;
right: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<section id="services">
<div class="container">
<div class="row">
<div draggable="true" class="parent col-lg-12 text-center">
<h2 class="section-heading">Services</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
<div class="handler"></div>
</div>
</div>
</div>
</section>
Related
I'm trying to make a sidebar and top of the page not move when you scroll (like Twitter, Facebook, etc.).
I'm only using CSS and Html.
I managed to make the side bars stay there, but the "Home" part does not work.
I tried with Position: Sticky, set overflow-x to auto for the parent, tried wrapping it into another div and self-align: flex-start, but nothing seems to be working.
Now that I put it into a smaller screen, it also looks to overlap the Side bar with the Feed, and hide the Widgets.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
--twitter-color: #50b7f5;
--twitter-background: #e6ecf0;
}
/* Sidebar Styling Starts */
.sidebarOption {
display: flex;
align-items: center;
cursor: pointer;
}
.sidebarOption .material-icons,
.fa-twitter {
padding: 20px;
}
.sidebarOption h2 {
font-weight: 800;
font-size: 20px;
margin-right: 20px;
}
.sidebarOption:hover {
background-color: var(--twitter-background);
border-radius: 30px;
color: var(--twitter-color);
transition: color 100ms ease-out;
}
.sidebarOption.active {
color: var(--twitter-color);
}
.sidebar_tweet {
width: 100%;
background-color: var(--twitter-color);
border: none;
color: white;
font-weight: 900;
border-radius: 30px;
height: 50px;
margin-top: 20px;
}
body {
display: flex;
height: 100%;
max-width: 1300px;
margin-left: auto;
margin-right: auto;
padding: 0 10px;
overflow-x: auto;
}
.sidebar {
border-right: 1px solid var(--twitter-background);
flex: 0.2;
min-width: 250px;
margin-top: 20px;
padding-left: 20px;
padding-right: 20px;
left: 0;
align-self: flex-start;
position: sticky;
top: 0;
overflow-x: auto;
}
.fa-twitter {
color: var(--twitter-color);
font-size: 30px;
}
/* Sidebar Styling Ends */
/* Feed Styling Starts */
.feed {
flex: 0.5;
border-right: 1px solid var(--twitter-background);
min-width: fit-content;
overflow-x: auto;
align-self: flex-start;
}
.feed-header {
border: 1px solid var(--twitter-background);
padding: 15px 20px;
/* I DONT KNOW HOW TO MAKE THIS STICK */
}
.feed-header h2 {
font-size: 20px;
font-weight: 800;
}
.feed::-webkit-scrollbar {
display: none;
}
.feed {
-ms-overflow-style: none;
scrollbar-width: none;
}
/* Styling Tweetbox Starts */
.tweetbox__input img {
border-radius: 50%;
height: 40px;
}
.tweetBox {
padding-bottom: 10px;
border-bottom: 8px solid var(--twitter-background);
padding-right: 10px;
}
.tweetBox form {
display: flex;
flex-direction: column;
}
.tweetbox__input {
display: flex;
padding: 20px;
}
.tweetbox__input input {
display: flex;
margin-left: 20px;
font-size: 20px;
border: none;
outline: none;
}
.tweetBox__tweetButton {
background-color: var(--twitter-color);
border: none;
color: white;
font-weight: 900;
border-radius: 30px;
width: 80px;
height: 40px;
margin-top: 20px;
margin-left: auto;
}
/* Styling Tweetbox Ends */
/* Feed Styling Ends */
/* Post Styling Starts */
.post__avatar img {
border-radius: 50%;
height: 40px;
}
.post {
display: flex;
align-items: flex-start;
border-bottom: 1px solid var(--twitter-background);
padding-bottom: 10px;
}
.post__body img {
width: 450px;
object-fit: contain;
border-radius: 20px;
}
.post__footer {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
.post__badge {
font-size: 14px !important;
color: var(--twitter-color);
margin-right: 5px;
}
.post__headerSpecial {
font-weight: 600;
font-size: 12px;
color: gray;
}
.post__headerText {
font-size: 15px;
margin-bottom: 5px;
}
.post__headerDescription {
margin-bottom: 10px;
font-size: 15px;
}
.post__body {
flex: 1;
padding: 10px;
}
.post__avatar {
padding: 20px;
}
/* Post Styling Ends */
/* Widgets Styling Starts */
.widgets {
flex: 0.3;
right: 0;
right: 0;
align-self: flex-start;
position: sticky;
top: 0;
overflow-x: auto;
}
.widgest__input {
display: flex;
align-items: center;
background-color: var(--twitter-background);
padding: 10px;
border-radius: 20px;
margin-top: 10px;
margin-left: 20px;
}
.widgest__input input {
border: none;
background-color: var(--twitter-background);
outline: none;
}
.widgets__searchIcon {
color: gray;
}
.widgets__widgetContainer {
display: flex;
flex-direction: column;
margin-top: 10px;
margin-left: 20px;
padding: 20px;
background-color: #f5f8fa;
border-radius: 20px;
}
.widgets__widgetContainer h2 {
font-size: 18px;
font-weight: 800;
}
.card_container {
display: flex;
flex-direction: column;
align-items: center;
}
.card {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 18rem;
}
.card img {
border-radius: 20px;
width: 18rem;
}
/* Widgets Styling Ends */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Twiter Clone</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Sidebar Start -->
<div class="sidebar">
<i class="fab fa-twitter "></i>
<div class="sidebarOption active ">
<span class="material-icons ">home</span>
<h2>Home</h2>
</div>
<div class="sidebarOption">
<span class="material-icons ">search</span>
<h2>Explore</h2>
</div>
<div class="sidebarOption">
<span class="material-icons ">notifications_none</span>
<h2>Notifications</h2>
</div>
<div class="sidebarOption">
<span class="material-icons ">mail_outline</span>
<h2>Message</h2>
</div>
<div class="sidebarOption">
<span class="material-icons ">bookmark_border</span>
<h2>Bookmarks</h2>
</div>
<div class="sidebarOption">
<span class="material-icons">list_alt</span>
<h2>Lists</h2>
</div>
<div class="sidebarOption">
<span class="material-icons">perm_identity</span>
<h2>Profile</h2>
</div>
<div class="sidebarOption">
<span class="material-icons">more_horiz</span>
<h2>More</h2>
</div>
<button class="sidebar_tweet">Tweet</button>
</div>
<!-- Sidebar End -->
<!-- Feed Starts -->
<div class="feed">
<div class="feed_header">
<h2>Home</h2>
</div>
<!-- Tweetbox Starts -->
<div class="tweetBox">
<form>
<div class="tweetbox__input">
<img src="https://i.pinimg.com/originals/a6/58/32/a65832155622ac173337874f02b218fb.png" alt="">
<input type="text" placeholder="What's happening">
</div>
<button class="tweetBox__tweetButton">Tweet</button>
</form>
</div>
<!-- Tweetbox Ends -->
<!-- Post Starts -->
<div class="post">
<div class="post__avatar">
<img src="https://i.pinimg.com/originals/a6/58/32/a65832155622ac173337874f02b218fb.png" alt="">
</div>
<div class="post__body">
<div class="post__header">
<div class="post__headerText">
<h3>My Name
<span class="post_headerSpecial">
<span class="material-icons post__badge"> verified </span>#myname
</span>
</h3>
</div>
<div class="post_headerDescription">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
<img src="https://i.ytimg.com/vi/bepwr1-CNRU/maxresdefault.jpg" alt="">
<div class="post__footer">
<span class="material-icons">repeat</span>
<span class="material-icons">favorite_border</span>
<span class="material-icons">publish</span>
</div>
</div>
</div>
<!-- Post Ends -->
<!-- Post Starts -->
<div class="post">
<div class="post__avatar">
<img src="https://i.pinimg.com/originals/a6/58/32/a65832155622ac173337874f02b218fb.png" alt="">
</div>
<div class="post__body">
<div class="post__header">
<div class="post__headerText">
<h3>My Name
<span class="post_headerSpecial">
<span class="material-icons post__badge"> verified </span>#myname
</span>
</h3>
</div>
<div class="post_headerDescription">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
<img src="https://i.ytimg.com/vi/bepwr1-CNRU/maxresdefault.jpg" alt="">
<div class="post__footer">
<span class="material-icons">repeat</span>
<span class="material-icons">favorite_border</span>
<span class="material-icons">publish</span>
</div>
</div>
</div>
<!-- Post Ends -->
<!-- Post Starts -->
<div class="post">
<div class="post__avatar">
<img src="https://i.pinimg.com/originals/a6/58/32/a65832155622ac173337874f02b218fb.png" alt="">
</div>
<div class="post__body">
<div class="post__header">
<div class="post__headerText">
<h3>My Name
<span class="post_headerSpecial">
<span class="material-icons post__badge"> verified </span>#myname
</span>
</h3>
</div>
<div class="post_headerDescription">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
<img src="https://i.ytimg.com/vi/bepwr1-CNRU/maxresdefault.jpg" alt="">
<div class="post__footer">
<span class="material-icons">repeat</span>
<span class="material-icons">favorite_border</span>
<span class="material-icons">publish</span>
</div>
</div>
</div>
<!-- Post Ends -->
<!-- Post Starts -->
<div class="post">
<div class="post__avatar">
<img src="https://i.pinimg.com/originals/a6/58/32/a65832155622ac173337874f02b218fb.png" alt="">
</div>
<div class="post__body">
<div class="post__header">
<div class="post__headerText">
<h3>My Name
<span class="post_headerSpecial">
<span class="material-icons post__badge"> verified </span>#myname
</span>
</h3>
</div>
<div class="post_headerDescription">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
<img src="https://i.ytimg.com/vi/bepwr1-CNRU/maxresdefault.jpg" alt="">
<div class="post__footer">
<span class="material-icons">repeat</span>
<span class="material-icons">favorite_border</span>
<span class="material-icons">publish</span>
</div>
</div>
</div>
<!-- Post Ends -->
</div>
<!-- Feed Ends -->
<!-- Widget Starts -->
<div class="widgets">
<div class="widgest__input">
<span class="material-icons widgets__searchIcon"> search </span>
<input type="text" placeholder="search Twitter">
</div>
<div class="widgets__widgetContainer">
<h2>What's happening</h2>
<div class="card_container">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="https://neilpatel.com/wp-content/uploads/2021/03/source-code_featured-image.png" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
<div class="widgets__widgetContainer">
<h2>What's happening</h2>
<div class="card_container">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="https://neilpatel.com/wp-content/uploads/2021/03/source-code_featured-image.png" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Widget Ends -->
</body>
</html>
In your code if you remove overflow-x: auto from .feed and add
.feed_header {
position: sticky;
top: 0;
}
the 'Home' heading sticks to the top as you scroll.
Another way is to use
.feed_header {
position: fixed;
top: 0;
}
.feed {
margin-top: 16px;
}
This fixes the feed_header to the top of the screen as you scroll. The feed container then needs a bit of spacing at the top to ensure the feed_header isn't overlapping.
Remove overflow-x: auto; from .feed and add this to your css:
.feed_header, .tweetBox {
position: sticky;
top: 0;
}
Please insert the following code and make changes to your classes as well.
change from .feed-header to .feed_header
.feed_header {
border: 1px solid var(--twitter-background);
padding: 15px 20px;
/* I DONT KNOW HOW TO MAKE THIS STICK */
position: fixed; /*Code to add*/
top: 0; /*Code to add*/
}
Adding on to #John's answer - sometimes you may need to specify z-index:1 to have the element always on top while scrolling. Like this:
position: -webkit-sticky; /* Safari & IE */
position: sticky;
top: 0;
z-index: 1;
Just add position: fixed for sidebar and feed header.
.feed_header, .sidebar {
position: fixed;
top: 0;
}
I have a card section in HTML using bootstrap which works as expected in codepen and on the example site but doesn't work in the local system.
Here html code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Why Choose Us Section Design With Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.2/css/all.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Why Us Section -->
<section class="why-us">
<div class="container">
<div class="row">
<div class="col-sm-6 col-lg-4">
<div class="box">
<span>01</span>
<h4>Why Lorem Ipsum</h4>
<p>There are many variations of passages of available, but the majority have suffered alteration in some form</p>
<img src="/images/image-one.jpg" alt="">
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="box">
<span>02</span>
<h4>Why do we use it</h4>
<p>There are many variations of Lorem Ipsum available, but the majority have suffered alteration in some form</p>
<img src="/images/image-two.jpg" alt="">
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="box">
<span>03</span>
<h4>Can I get some</h4>
<p>There are many variations of Lorem Ipsum available, but the majority have suffered alteration in some form</p>
<img src="/images/image-three.jpg" alt="">
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="box">
<span>04</span>
<h4>Why Lorem Ipsum</h4>
<p>There are many variations of passages of Lorem Ipsum available, the majority have suffered alteration in some form</p>
<img src="/images/image-four.jpg" alt="">
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="box">
<span>05</span>
<h4>Why do we use it</h4>
<p>There are many of passages of Lorem Ipsum available, but the majority have suffered alteration in some form</p>
<img src="/images/image-five.jpg" alt="">
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="box">
<span>06</span>
<h4>Can I get some</h4>
<p>There are variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form</p>
<img src="/images/image-six.jpg" alt="">
</div>
</div>
</div>
</div>
</section>
<!-- End Why Us Section -->
</body>
</html>
The CSS code
.why-us h2 {
position: relative;
margin-bottom: 35px;
}
.why-us h2::after {
content: "";
width: 120px;
height: 3px;
display: inline-block;
background: #FFC107;
position: absolute;
left: 0px;
right: 0px;
bottom: -20px;
margin: 0 auto;
}
.why-us .box {
padding: 50px 30px;
box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.10);
transition: 0.5s;
position: relative;
background-color: #333;
max-height: 230px;
overflow: hidden;
margin-bottom: 30px;
border-radius: 10px;
}
.why-us .box:hover {
padding: 30px 30px 70px 30px;
box-shadow: 10px 15px 30px rgba(0, 0, 0, 0.20);
background-color: rgba(0, 0, 0, 0.3);
}
.why-us .box img {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
z-index: -1;
opacity: 0;
transition:all ease 1s;
}
.why-us .box:hover img {
opacity: 1;
}
.why-us .box span {
display: block;
font-size: 56px;
font-weight: 700;
color: #6b6060;
position: absolute;
right: 10px;
top: 0px;
line-height: normal;
}
.why-us .box h4 a {
font-size: 24px;
font-weight: 600;
padding: 0;
margin: 20px 0;
color: #dadada;
text-decoration: none;
}
.why-us .box p {
color: #aaaaaa;
font-size: 15px;
margin: 0;
padding: 0;
}
.why-us .box:hover span,
.why-us .box:hover h4 a,
.why-us .box:hover p {
color: #fff;
}
The cards are not showing images on hover as expected from the sample code. https://www.markuptag.com/demo/why-choose-us-section-design-with-bootstrap.php
The image appears on hover when I change the z-index=-1 to +ve but then the text doesn't appear on hover
This question already has answers here:
Making text background transparent but not text itself
(9 answers)
Closed 5 years ago.
I want the background to have an opacity of .8 but not affect the other elements on top. How can I do this?
HTML
<div id="background">
<div id="foreground">
<div class="row">
<div class="column">
<div class="card">
<img src="lee2.png" alt="Jane" style="width:200px; height:200px">
<div class="container">
<h2>Lee Hannigan</h2>
<p class="title">CEO & Founder</p>
<p>Some text that describes me lorem ipsum ipsum lorem.</p>
<p>lee#stokeddesigns.com</p>
<p><button class="button">Contact</button></p>
</div>
</div>
</div>
<div class="column">
<div class="card">
<img src="bosco2.png" alt="Mike" style="width:200px; height:200px;">
<div class="container">
<h2>Bosco</h2>
<p class="title">Lead Developer</p>
<p>Some text that describes me lorem ipsum ipsum lorem.</p>
<p>bosco#stokeddesigns.com</p>
<p><button class="button">Contact</button></p>
</div>
</div>
</div>
<div class="column">
<div class="card">
<img src="cat2.png" alt="John" style="width:200px;height:200px;">
<div class="container">
<h2>Caitriona Lyons</h2>
<p class="title">Designer</p>
<p>Some text that describes me lorem ipsum ipsum lorem.</p>
<p>cat#stokeddesigns.com</p>
<p><button class="button">Contact</button></p>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
/* Three columns side by side */
.column {
float: left;
width: 25%;
margin-bottom: 16px;
margin-left:70px;
padding: 0 8px;
background-color: grey;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.container {
padding: 0 16px;
}
/* Clear floats */
.container::after, .row::after {
content: "";
clear: both;
display: table;
}
.title {
color: #453A3A;
}
.button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
}
.button:hover {
background-color: #555;
}
#background{
background-color: #ED9300;
opacity:0.8;
}
#foreground{
text-align: center;
margin-top: 100px;
padding: 50px;
}
This is what the page looks like now
Use rgba coloring for the orange stripe instead of opacity. So like this:
background-color: rgba(215, 130, 44, 0.8);
The 0.8 is the opacity wich can be between 0 and 1
Hope this helps!
Instead of using the opacity, change the background-color to an RGBA instead of a hex. While opacity makes all child elements see through, using an RGBA does not.
I have been struggling to make right alignment and responsive. i want to add some of the test on top of the image. i have try changing values in css but it doesnt work out. i want to make as it below:
codepen: codepen link
Please advise. i am new to bootstrap.
<html>
<head>
<link data-require="bootstrap#4.0.0-alpha.2" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
<script data-require="bootstrap#4.0.0-alpha.2" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="container-fluid" style="background: white;">
<div class="row no-gutter">
<div class="col-sm-3">
<div class="parent" >
<div class="circle">1</div>
<div class="expenseItems">Mobile</div>
<div class="hr"></div>
</div>
</div>
<div class="col-sm-3">
<div class="parent" >
<div class="circle">2</div>
<div class="expenseItems">Select a Product Category</div>
<div class="hr"></div>
</div>
</div>
<div class="col-sm-4">
<div class="parent" >
<img src="http://images.clipartpanda.com/baby-blue-border-clipart-8748-light-blue-square-clip-art.png" class="tabimg" alt="">
<div class="circle tag" style="background-color:darkblue">3</div>
<div class="expenseItems">Find the latest software, firmware, and drivers<font color="darkblue"></font></div>
</div>
</div>
<div class="col-sm-2">
<div class="parent" >
<div class="circle">4</div>
<div class="expenseItems">Tablet Use</div>
<div class="hr"></div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
.no-gutter > [class*='col-'] {
padding-right: 1px;
padding-left: 1px;
}
.parent {
border: 1px;
padding: 20px 25px 25px;
}
.circle {
width: 25px;
height: 25px;
border-radius: 50%;
padding-top: 3px;
display: inline-block;
text-align: center;
background-color: gray;
color: white;
}
.expenseItems {
padding: 10px;
display: inline-block;
color: gray;
font-size: 24px;
}
.hr {
background: gray;
height: 2px;
}
.tag {
float: left;
position: absolute;
left: 0px;
top: 15px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
}
.tabimg {
padding : 0px 0px 0px 0px;
height: 30px;
width: 100px;
margin-top: 0px;
}
The easiest approach to this would be just setting a background image to the div
in question.
I've added an ID to the div you're trying to add the image to, and I added the following code for that div.
#box-with-image {
background: url(http://images.clipartpanda.com/baby-blue-border-clipart-8748-light-blue-square-clip-art.png);
background-size: contain;
background-repeat: no-repeat;
/*
OTHER OPTION:
background-size: cover;
*/
}
Full Codepen Link
For sizing, contain will position the image top left, and fill whichever dimension is smallest. cover will fit whichever dimension is largest.
Or in other words, in a non-square shaped div, contain will leave whitespace, while cover will cut some of the image off.
Another approach to this would be using the following CSS on the image
img {
position: relative;
top: 0;
left: 0;
width: 100%;
}
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 7 years ago.
Improve this question
I'm trying achieve an effect in which the image I am displaying is displayed within a computer screen. So basically, there'll be an image of a computer screen and my image within the screen.
What I am about to do is use photoshop to display the whole thing as a single image. But this is not really scalable. The other idea I had was to create CSS border images of the computer screen, however this sounds a bit involved, I am looking for a quick thing.
I know I've seen this effect on plenty of websites (but I can't remember the name of any to check the source), and I really feel there might be a ready-to-use solution to achieve that. Does such a ready-to-use solution exists or can you think of a simple way to achieve that ?
Create a computer image say(500x500)px with its screen transparent(blank) and export it as png with transparency on.
Then export you another image with same resolution.
And then you css position to place them on each other.
#computer_image{
position:relative;
z-index:100; /*To keep computer screen above use positive value*/
}
#computer_screen{
position:relative;
z-index:50;
/*Use top/left/right/bottom to place image on computer screen*/
}
Not sure if this I got you right, but here is a little demo of a MacBook Pro screen with a grumpy cat on it. Is this the kind of result you want to achieve? (EDIT: take a look for snippet #2 for the whole body (use the "full-page" view for a better result) )
Screen only
html * {
box-sizing: border-box;
}
#content {
background: url('http://truestorieswithgill.com/wp-content/uploads/2013/09/20130915-190532.jpg') no-repeat center center;
background-size: contain;
width: 100%;
height: 100%;
}
#outer-frame {
border: 4px solid #DADFE1;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
height: 350px;
width: 600px;
}
#inner-frame {
height: 100%;
border: 20px solid #000;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
overflow: hidden;
}
<div id="outer-frame">
<div id="inner-frame">
<div id="content"></div>
</div>
</div>
Screen + body
html * {
box-sizing: border-box;
}
.wrap{
width: 100%;
height: 100%;
}
#content {
background: url('http://truestorieswithgill.com/wp-content/uploads/2013/09/20130915-190532.jpg') no-repeat center center;
background-size: contain;
width: 100%;
height: 100%;
}
#outer-frame {
border: 4px solid #DADFE1;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
height: 350px;
width: 600px;
margin: 0 auto;
}
#inner-frame {
height: 100%;
border: 20px solid #000;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
overflow: hidden;
}
#body{
height: 20px;
background: #DADFE1;
width: 700px;
margin: 0 auto;
border-radius: 2px;
border-bottom-left-radius: 24px;
border-bottom-right-radius: 24px;
}
#notch{
height:10px;
width: 100px;
background: #BDC3C7;
margin: 0 auto;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
box-shadow: inset 1px -1px 2px rgba(0,0,0,0.5);
}
<div class="wrap">
<div id="outer-frame">
<div id="inner-frame">
<div id="content"></div>
</div>
</div>
<div id="body">
<div id="notch"></div>
</div>
</div>
This can be achieved by using CSS positioning methods. Here is an example you can use.
JSbin Demo
.project-widget-container {
position: relative;
margin-bottom: 30px;
}
.project-widget-container section {
position: relative;
padding-top: 20px;
margin-left: 10px;
}
.project-widget-container section:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 20px;
bottom: 0;
border: 1px solid #eee;
z-index: -1;
}
.project-widget-container section:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 20px;
bottom: 0;
box-shadow: -5px -5px 5px -5px #eee, 5px -5px 5px -5px #eee;
z-index: -1;
}
.project-title {
border-left: 2px solid #660061;
padding-left: 20px;
}
.project-title h4 {
color: #660061;
font-weight: bold;
font-size: 1.4em;
line-height: 50px;
}
.project-excerpt {
color: #666;
font-size: 1.1em;
padding: 20px 20px 0 20px;
line-height: 1.2em;
height: 60px;
}
img.imac {
width: 100%;
position: absolute;
left: 0;
bottom: 0;
right: 0;
}
.project-image-container {
position: relative;
left: -10px;
padding-top: 85%;
}
.thumb img {
width: 50%;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -25%;
}
.thumb {
position: absolute;
z-index: 1;
bottom: 18%;
left: 0;
right: 0;
}
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3 project-widget-container">
<section>
<div class="project-title">
<h4>Project 1</h4>
</div>
<div class="project-excerpt">
Lorem Test dolor sit amet, consectetur adipiscing elit.
</div>
<div class="project-image-container">
<div class="thumb">
<img class="img-responsive" src="http://bombdiggitydesign.com/jsbin/xffdfd.png">
</div>
<img class="imac img-responsive" src="http://s29.postimg.org/b5kegwt53/small_mac.png">
</div>
</section>
</div>
<!-- col -->
<div class="col-sm-6 col-md-3 project-widget-container">
<section>
<div class="project-title">
<h4>Project 1</h4>
</div>
<div class="project-excerpt">
Lorem Test dolor sit amet, consectetur adipiscing elit.
</div>
<div class="project-image-container">
<div class="thumb">
<img class="img-responsive" src="http://bombdiggitydesign.com/jsbin/xffdfd.png">
</div>
<img class="imac img-responsive" src="http://s29.postimg.org/b5kegwt53/small_mac.png">
</div>
</section>
</div>
<!-- col -->
<div class="clearfix visible-sm"></div>
<div class="col-sm-6 col-md-3 project-widget-container">
<section>
<div class="project-title">
<h4>Project 1</h4>
</div>
<div class="project-excerpt">
Lorem Test dolor sit amet, consectetur adipiscing elit.
</div>
<div class="project-image-container">
<div class="thumb">
<img class="img-responsive" src="http://bombdiggitydesign.com/jsbin/xffdfd.png">
</div>
<img class="imac img-responsive" src="http://s29.postimg.org/b5kegwt53/small_mac.png">
</div>
</section>
</div>
<!-- col -->
<div class="col-sm-6 col-md-3 project-widget-container">
<section>
<div class="project-title">
<h4>Project 1</h4>
</div>
<div class="project-excerpt">
Lorem Test dolor sit amet, consectetur adipiscing elit.
</div>
<div class="project-image-container">
<div class="thumb">
<img class="img-responsive" src="http://bombdiggitydesign.com/jsbin/xffdfd.png">
</div>
<img class="imac img-responsive" src="http://s29.postimg.org/b5kegwt53/small_mac.png">
</div>
</section>
</div>
<!-- col -->
<div class="clearfix visible-sm"></div>
</div>
<!-- row -->
</div>
<!-- container -->
</body>
</html>