the Divs look great but once a image url is loaded it does not stay inside the div. Does this have something to do with overflow? i was under the impression that the image being 100% would stretch out to the divs specified height and width
---------------------------------------
---------------------------------------
---------------------------------------
---------------------------------------
---------------------------------------
---------------------------------------
.sec3head {
padding-top: 50px;
padding-bottom: 50px;
width: 100%;
height: 240px;
text-align: center;
border: px solid red;
background: rgba(0, 0, 0, 0.5);
color: #FFF;
border-radius: 10px;
}
.sec3head4 {
/* pic */
display: inline-block;
width: 30%;
height: 200px;
text-align: center;
border: 1px solid red;
color: #FFF;
border-radius: 5px;
}
.sec3head5 {
/* text */
display: inline-block;
width: 60%;
height: 200px;
align-content: start;
text-align: center;
border: px solid red;
background: rgba(0, 0, 0, 0.5);
color: #FFF;
border-radius: 10px;
}
<div class="sec3head">
<div class="sec3head4">
<img src="images/" alt="alt text" height="100%" width="100%" />
</div>
<!--sec3headt4-->
<div class="sec3head5">
text
</div>
<!--sec3headt5-->
</div>
<!--sec3head-->
<div class="sec3head">
<div class="sec3head5">
text
</div>
<!--sec3headt5-->
<div class="sec3head4">
<img src="images/" alt="alt text" height="100%" width="100%" />
</div>
<!--sec3headt4-->
</div>
<!--sec3head-->
<div class="sec3head">
<div class="sec3head4">
<img src="data:image/jpeg;base64,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"
alt="alt text" height="100%" width="100%" />
</div>
<!--sec3headt4-->
<div class="sec3head5">
text
</div>
<!--sec3headt5-->
</div>
<!--sec3head-->
You are only missing one bit of CSS.
You need to use vertical-align:top;.
The vertical-align property affects the vertical positioning inside a
line box of the boxes generated by an inline-level element.
top
Align the top of the aligned subtree with the top of the line box.
https://www.w3.org/wiki/CSS/Properties/vertical-align
One a side not dont use 100% in both the height & width of an image. Add the actual image dimensions and use css to change the height and width to 100%.
Also do some reading on div positioning and when to use display inline-block and when to use css tables.
And don't ever use float for positioning anything other than an image that needs text to wrap around it. It's not for elements.
.sec3head {
padding-top: 50px;
padding-bottom: 50px;
width: 100%;
height: 240px;
text-align: center;
border: px solid red;
background: rgba(0, 0, 0, 0.5);
color: #FFF;
border-radius: 10px;
}
.sec3head4 {
/* pic */
display: inline-block;
width: 30%;
height: 200px;
text-align: center;
border: 1px solid red;
color: #FFF;
border-radius: 5px;
vertical-align:top;
}
.sec3head5 {
/* text */
display: inline-block;
width: 60%;
height: 200px;
align-content: start;
text-align: center;
border: px solid red;
background: rgba(0, 0, 0, 0.5);
color: #FFF;
border-radius: 10px;
vertical-align:top;
}
<div class="sec3head">
<div class="sec3head4">
<img src="https://secure.i.telegraph.co.uk/multimedia/archive/01599/duck2_1599748c.jpg" alt="alt text" height="100%" width="100%" />
</div>
<!--sec3headt4-->
<div class="sec3head5">
text
</div>
<!--sec3headt5-->
</div>
<!--sec3head-->
<div class="sec3head">
<div class="sec3head5">
text
</div>
<!--sec3headt5-->
<div class="sec3head4">
<img src="https://secure.i.telegraph.co.uk/multimedia/archive/01599/duck2_1599748c.jpg" alt="alt text" height="100%" width="100%" />
</div>
<!--sec3headt4-->
</div>
<!--sec3head-->
<div class="sec3head">
<div class="sec3head4">
<img src="data:image/jpeg;base64,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"
alt="alt text" height="100%" width="100%" />
</div>
<!--sec3headt4-->
<div class="sec3head5">
text
</div>
<!--sec3headt5-->
</div>
<!--sec3head-->
You should use float: right; or float: left; to put in place your DOM block elements.
.sec3head {
padding-top: 50px;
padding-bottom: 50px;
width: 100%;
height: 240px;
text-align: center;
border: px solid red;
background: rgba(0, 0, 0, 0.5);
color: #FFF;
border-radius: 10px;
}
.sec3head4 {
/* pic */
display: inline-block;
width: 30%;
height: 200px;
text-align: center;
border: 1px solid red;
color: #FFF;
border-radius: 5px;
}
.sec3head5 {
/* text */
display: inline-block;
width: 60%;
height: 200px;
float: right;
align-content: start;
text-align: center;
border: px solid red;
background: rgba(0, 0, 0, 0.5);
color: #FFF;
border-radius: 10px;
}
<div class="sec3head">
<div class="sec3head4">
<img src="images/" alt="alt text" height="100%" width="100%" />
</div>
<!--sec3headt4-->
<div class="sec3head5">
text
</div>
<!--sec3headt5-->
</div>
<!--sec3head-->
<div class="sec3head">
<div class="sec3head5">
text
</div>
<!--sec3headt5-->
<div class="sec3head4">
<img src="images/" alt="alt text" height="100%" width="100%" />
</div>
<!--sec3headt4-->
</div>
<!--sec3head-->
<div class="sec3head">
<div class="sec3head4">
<img src="data:image/jpeg;base64,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"
alt="alt text" height="100%" width="100%" />
</div>
<!--sec3headt4-->
<div class="sec3head5">
text
</div>
<!--sec3headt5-->
</div>
<!--sec3head-->
Related
How do i make these divs to move down when window resizes and on mobile devices to be a width of 100%; Subject class = "project-cards"
Heres the Code...
Resize window.
Theres alot of things going on here, first when the window resizes i want the three divs to move down into a vertical row. When the window gets to about the size of a mobile phone i want the three divs to still be vertical with a width of 100%; so that it is covering the the whole page width wise. You can see alot of things going wrong with the content inside the divs when it resizes. For example the text and button overlap. I know i cant ask two questions but if you could help me get the three divs to be responsive, that will help me so much. Visit site Xlaeo.tk
.mainCenter{
width:100%;
padding-right:100px;
padding-left:100px;
padding-top: 50px;
height:700px;
}
.project-wrapper{
margin-top: 420px;
}
.headerProjects{
font-size: 25px;
font-weight: BOLD;
margin-left: 52px;
margin-bottom: 20px;
color: #d80068;
}
.projectholders{
height:auto;
width:100%;
margin:0 auto;
display: flex;
justify-content: center;
margin-bottom: 100px;
min-width: 200px;
}
.projects-cards{
border:.9px solid #f7f7f7;
border-radius: 2rem;
display: block;
width: 30%;
margin-left:25px;
}
.projects-cards:hover{
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
transition-delay: 1s;
transition-duration: .5s;
}
.media-top{
width:100%;
height:300px;
border-bottom: 1.9px solid gray;
position: relative;
}
.media-top img{
border-top-left-radius: 2rem;
border-top-right-radius: 2rem;
}
.project-info{
width:100%;
}
.progress-left{
float: left;
width: 150px;
height: 150px;
}
.project-money{
float: right;
width: 170px;
border-bottom: 1px solid #c7c8c9;
}
.project-money h1{
font-size: 16.9px;
color: gray;
font-weight: bold;
width:900%;
}
.visitProject-button-H{
padding: 20px;
float:right;
}
.visi-project{
height:50px;
width:135px;
background-color: #ff0043;
font-size: 20px;
font-weight: bold;
border:none;
border-top-left-radius: 1rem;
border-bottom-left-radius: 1rem;
}
.under{
display: flex;
margin:0 auto;
justify-content: center;
font-size: 60px;
color: #ff0043;
}
<div class="projectholders">
<div class="projects-cards">
<div class="media-top" >
<img src="http://cdn.pcwallart.com/images/mercedes-benz-biome-seed-wallpaper-1.jpg" width="100%" height="100%" />
</div>
<div class="project-info">
<div class="progress-left">
<img src="https://camo.githubusercontent.com/40a03a2e27517edee74b177b7d48f1632b31c693/687474703a2f2f692e696d6775722e636f6d2f414a30364157452e706e67"
width="100%" height="100%;" />
</div>
<div class="project-money">
<h1>Backed by $102,323 </h1>
</div>
<div class="visitProject-button-H">
<button class="visi-project" type="button">Visit</button>
</div>
</div>
</div>
<div class="projects-cards">
<div class="media-top">
<img src="https://cdn.dribbble.com/users/149817/screenshots/1436337/speedcam.gif" width="100%" height="100%" />
</div>
<div class="project-info">
<div class="progress-left">
<img src="https://camo.githubusercontent.com/40a03a2e27517edee74b177b7d48f1632b31c693/687474703a2f2f692e696d6775722e636f6d2f414a30364157452e706e67"
width="100%" height="100%;" />
</div>
<div class="project-money">
<h1>Backed by $9,564 </h1>
</div>
<div class="visitProject-button-H">
<button class="visi-project" type="button">Visit</button>
</div>
</div>
</div>
<div class="projects-cards">
<div class="media-top">
<img src="http://coolwallpaperz.info/user-content/uploads/wall/o/27/girl-motorcycle-streamlined-cool-sumer-370761.jpg" width="100%" height="100%" />
</div>
<div class="project-info">
<div class="progress-left">
<img src="https://camo.githubusercontent.com/40a03a2e27517edee74b177b7d48f1632b31c693/687474703a2f2f692e696d6775722e636f6d2f414a30364157452e706e67"
width="100%" height="100%;" />
</div>
<div class="project-money">
<h1>Backed by $23,324 </h1>
</div>
<div class="visitProject-button-H">
<button class="visi-project" type="button">Visit</button>
</div>
</div>
</div>
</div>
If you really don't want to use any libraries,
Please go with CSS Media Query
<div>
<div class="block">
<p>Hello</p>
</div>
<div class="block">
<p>Hello</p>
</div>
<div class="block">
<p>Hello</p>
</div>
<div>
CSS
.block{
display: inline-block;
width: 30%;
}
#media screen and (max-width: 480px) {
.block{
display: inline-block;
width: 100%;
}
}
DEMO: https://codepen.io/mkarrfan/pen/WEOWpG
You can try this I have added bootstrap to your code and your can define your css accordingly.
Firstly add bootstrap CDN to your code and define each section with the columns size you want I have added col-sm-4 to the class.
Note : sm is for small screen similarly we have md, xs, lg for medium extra-small and large screen, you can define all at same time also depending how you want your view to look on different size of screen, you can devide screen into 12 parts so range will be from col-sm-1 to col-sm-12.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" >
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="projectholders row">
<div class="projects-cards col-sm-4">
<div class="media-top" >
<img src="http://cdn.pcwallart.com/images/mercedes-benz-biome-seed-wallpaper-1.jpg" width="100%" height="100%" />
</div>
<div class="project-info">
<div class="progress-left">
<img src="https://camo.githubusercontent.com/40a03a2e27517edee74b177b7d48f1632b31c693/687474703a2f2f692e696d6775722e636f6d2f414a30364157452e706e67"
width="100%" height="100%;" />
</div>
<div class="project-money">
<h1>Backed by $102,323 </h1>
</div>
<div class="visitProject-button-H">
<button class="visi-project" type="button">Visit</button>
</div>
</div>
</div>
<div class="projects-cards col-sm-4">
<div class="media-top">
<img src="https://cdn.dribbble.com/users/149817/screenshots/1436337/speedcam.gif" width="100%" height="100%" />
</div>
<div class="project-info">
<div class="progress-left">
<img src="https://camo.githubusercontent.com/40a03a2e27517edee74b177b7d48f1632b31c693/687474703a2f2f692e696d6775722e636f6d2f414a30364157452e706e67"
width="100%" height="100%;" />
</div>
<div class="project-money">
<h1>Backed by $9,564 </h1>
</div>
<div class="visitProject-button-H">
<button class="visi-project" type="button">Visit</button>
</div>
</div>
</div>
<div class="projects-cards col-sm-4">
<div class="media-top">
<img src="http://coolwallpaperz.info/user-content/uploads/wall/o/27/girl-motorcycle-streamlined-cool-sumer-370761.jpg" width="100%" height="100%" />
</div>
<div class="project-info">
<div class="progress-left">
<img src="https://camo.githubusercontent.com/40a03a2e27517edee74b177b7d48f1632b31c693/687474703a2f2f692e696d6775722e636f6d2f414a30364157452e706e67"
width="100%" height="100%;" />
</div>
<div class="project-money">
<h1>Backed by $23,324 </h1>
</div>
<div class="visitProject-button-H">
<button class="visi-project" type="button">Visit</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
you can find the working fiddle https://jsfiddle.net/rhmasm3t/
I hope this will help. and this does not change any thing to your css.
I have made few adjustments in your code, such as widths of some divs. You can play around and see what works best.
You have used 900% on width of project-money h1 thats why your overflow-x is so much.
.project-money h1{
font-size: 16.9px;
color: gray;
font-weight: bold;
width:900%;
}
Also I have used media queries, so that when the width gets smaller the content will be below each other. Read w3 queries.
#media screen and (max-width:500px) {
.projectholders {
flex-direction: column;
}
Code
.mainCenter {
width: 100%;
padding-right: 100px;
padding-left: 100px;
padding-top: 50px;
height: 700px;
}
.project-wrapper {
margin-top: 420px;
}
.headerProjects {
font-size: 25px;
font-weight: BOLD;
margin-left: 52px;
margin-bottom: 20px;
color: #d80068;
}
.projectholders {
height: auto;
width: 100%;
margin: 0 auto;
display: inline-flex;
justify-content: center;
margin-bottom: 100px;
min-width: 200px;
}
.projects-cards {
border: .9px solid #f7f7f7;
border-radius: 2rem;
display: block;
width: 150px;
margin-left: 25px;
}
.projects-cards:hover {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
transition-delay: 1s;
transition-duration: .5s;
}
.media-top {
width: 100%;
height: 300px;
border-bottom: 1.9px solid gray;
position: relative;
}
.media-top img {
border-top-left-radius: 2rem;
border-top-right-radius: 2rem;
}
.project-info {
width: 100%;
}
.progress-left {
float: left;
width: 150px;
height: 150px;
}
.project-money {
float: right;
width: 150px;
border-bottom: 1px solid #c7c8c9;
}
.project-money h1 {
font-size: 16.9px;
color: gray;
font-weight: bold;
width: 900%;
}
.visitProject-button-H {
padding: 20px;
float: right;
}
.visi-project {
height: 50px;
width: 125px;
background-color: #ff0043;
font-size: 20px;
font-weight: bold;
text-align: center;
border: none;
border-top-left-radius: 1rem;
border-bottom-left-radius: 1rem;
}
.under {
display: flex;
margin: 0 auto;
justify-content: center;
font-size: 60px;
color: #ff0043;
}
#media screen and (max-width:500px) {
.projectholders {
flex-direction: column;
}
<div class="projectholders">
<div class="projects-cards">
<div class="media-top">
<img src="http://cdn.pcwallart.com/images/mercedes-benz-biome-seed-wallpaper-1.jpg" width="100%" height="100%" />
</div>
<div class="project-info">
<div class="progress-left">
<img src="https://camo.githubusercontent.com/40a03a2e27517edee74b177b7d48f1632b31c693/687474703a2f2f692e696d6775722e636f6d2f414a30364157452e706e67" width="100%" height="100%;" />
</div>
<div class="project-money">
<h1>Backed by $102,323 </h1>
</div>
<div class="visitProject-button-H">
<button class="visi-project" type="button">Visit</button>
</div>
</div>
</div>
<div class="projects-cards">
<div class="media-top">
<img src="https://cdn.dribbble.com/users/149817/screenshots/1436337/speedcam.gif" width="100%" height="100%" />
</div>
<div class="project-info">
<div class="progress-left">
<img src="https://camo.githubusercontent.com/40a03a2e27517edee74b177b7d48f1632b31c693/687474703a2f2f692e696d6775722e636f6d2f414a30364157452e706e67" width="100%" height="100%;" />
</div>
<div class="project-money">
<h1>Backed by $9,564 </h1>
</div>
<div class="visitProject-button-H">
<button class="visi-project" type="button">Visit</button>
</div>
</div>
</div>
<div class="projects-cards">
<div class="media-top">
<img src="http://coolwallpaperz.info/user-content/uploads/wall/o/27/girl-motorcycle-streamlined-cool-sumer-370761.jpg" width="100%" height="100%" />
</div>
<div class="project-info">
<div class="progress-left">
<img src="https://camo.githubusercontent.com/40a03a2e27517edee74b177b7d48f1632b31c693/687474703a2f2f692e696d6775722e636f6d2f414a30364157452e706e67" width="100%" height="100%;" />
</div>
<div class="project-money">
<h1>Backed by $23,324 </h1>
</div>
<div class="visitProject-button-H">
<button class="visi-project" type="button">Visit</button>
</div>
</div>
</div>
</div>
For the resizing functionality you should use bootstrap
It's simple and easy to use and provide responsiveness to your site.
I have 7 divs in a row on and I can't get the arrows in the middle to be horizontally in the centre of the outer div.
I've tried
top: 50%;
text-align: centre:
margin: 0 auto;
But none of them seem to work. How can I correct this?
HTML:
<div id="instruct">
<div align="center" class="category">
<img src="http://www.devo.co.uk/wp-content/uploads/2016/07/1-DEVO.png" width="150" height="auto"/>
<p class="ititle">1. You Order</p>
<p class="itext">Shop and browse your favorite<br>brands from your local shops</p>
</div>
<div align="center" class="arrow">
<img src="http://www.devo.co.uk/wp-content/uploads/2016/08/rightgreyarrow.png" width="50" height="auto"/>
</div>
<div align="center" class="category">
<img src="http://www.devo.co.uk/wp-content/uploads/2016/07/2-DEVOnewblue.png" width="175" height="auto"/>
<p class="ititle">2. We Collect</p>
<p class="itext">Our drivers make their way to your<br>local shop</p>
</div>
<div align="center" class="arrow">
<img src="http://www.devo.co.uk/wp-content/uploads/2016/08/rightgreyarrow.png" width="50" height="auto"/>
</div>
<div align="center" class="category">
<img src="http://www.devo.co.uk/wp-content/uploads/2016/07/3-DEVOcolour.png" width="95" height="auto"/>
<p class="ititle">3. We Deliver</p>
<p class="itext">Our drivers make their way to<br>your location</p>
</div>
<div align="center" class="arrow">
<img src="http://www.devo.co.uk/wp-content/uploads/2016/08/rightgreyarrow.png" width="50" height="auto"/>
</div>
<div align="center" class="category">
<img src="http://www.devo.co.uk/wp-content/uploads/2016/07/4-DEVO.png" width="65" height="auto"/>
<p class="ititle">4. You Enjoy</p>
<p class="itext">Track and receive your order<br>in as little as 30 minutes</p>
</div>
</div>
CSS:
#instruct {
height: auto;
width: 100%;
background-color: transparent;
border-bottom: 3px solid #fd0e35;
}
.category {
padding: 40px 50px 10px 50px;
display: inline-block;
}
.arrow {
padding: 0px;
display: inline-block;
border: 1px solid pink;
}
.ititle {
margin-top: 20px;
margin-bottom: 0;
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
color: #a6a6a6;
}
.itext {
font-size: 13px;
}
The simplest solution is the use of vertical-align: middle; on the children of the container:
#instruct > div { vertical-align: middle; }
See this fiddle.
You need to relatively position the element in order for the 'top' property to take effect:
.arrow {
padding: 0px;
display: inline-block;
border: 1px solid pink;
position:relative;
top:-50px; // <---- change this value to suit your preferred positioning.
}
This is what I've done:
body {
background-color: #d92626;
color: white;
}
body {
border-left: 5px solid black;
border-right: 5px solid black;
padding: 50px 50px;
}
.test {
display: block;
margin-left: auto;
margin-right: auto;
}
<div class="container">
<h1 align="center">
My text
</h1>
<h2 align="center">
MORE MORE MORE<br><br><br>
</h2>
<img class="test" src="http://www.velior.ru/wp-content/uploads/2009/05/Test-Computer-Key-by-Stuart-Miles.jpg" height="300" width="300">
</div>
How can I now move left and right border closer to the text and image, and then make the background between left and right border gray?
Borders are placed around an element's dimensions, in your case, the body tag covers the entire window. If you wanted them to be closer you can add borders to another element than body, and make it with less width.
I see you already have a container (.container) so you can use it and apply the borders and background to it while adding for example width: 60% and then margin: 0 auto to center it horizontally.
body {
background-color: #d92626;
color: white;
}
.container {
border-left: 5px solid black;
border-right: 5px solid black;
padding: 50px 50px;
width:60%;
margin:0 auto;
background: gray;
}
.test {
display: block;
margin-left: auto;
margin-right: auto;
}
<div class="container">
<h1 align="center">
My text
</h1>
<h2 align="center">
MORE MORE MORE<br><br><br>
</h2>
<img class="test" src="http://www.velior.ru/wp-content/uploads/2009/05/Test-Computer-Key-by-Stuart-Miles.jpg" height="300" width="300">
</div>
You need to set the border and background in the .container instead of the body.
DEMO:
body {
background-color: #d92626;
color: white;
}
body {
padding: 50px 50px;
}
.test {
display: block;
margin-left: auto;
margin-right: auto;
}
.container{
background:gray;
border-left: 5px solid black;
border-right: 5px solid black;
}
<div class="container">
<h1 align="center">
My text
</h1>
<h2 align="center">
MORE MORE MORE<br><br><br>
</h2>
<img class="test" src="http://www.velior.ru/wp-content/uploads/2009/05/Test-Computer-Key-by-Stuart-Miles.jpg" height="300" width="300">
Use your container div to achieve what you want:
body {
background-color: #d92626;
color: white;
}
div.container {
margin: 0 50px;
background-color: #cccccc;
border-left: 5px solid black;
border-right: 5px solid black;
color: #000000;
}
.test {
display: block;
margin-left: auto;
margin-right: auto;
}
<div class="container">
<h1 align="center">
My text
</h1>
<h2 align="center">
MORE MORE MORE<br><br><br>
</h2>
<img class="test" src="http://www.velior.ru/wp-content/uploads/2009/05/Test-Computer-Key-by-Stuart-Miles.jpg" height="300" width="300">
</div>
Wrap your content in a div and then apply border and red background to new div and grey background to body
HTML
<div class="container">
<div class="wrapper">
<h1 align="center">
My text
</h1>
<h2 align="center">
MORE MORE MORE<br><br><br>
</h2>
<img class="test" src="http://www.velior.ru/wp-content/uploads/2009/05/Test-Computer-Key-by-Stuart-Miles.jpg" height="300" width="300">
</div>
</div>
CSS
body {
background-color: #ccc;
color: white;
}
.wrapper {
border-left: 5px solid black;
border-right: 5px solid black;
margin: 50px 50px;
background: #d92626;
}
.test {
display: block;
margin-left: auto;
margin-right: auto;
}
Example : https://jsfiddle.net/parj6ep1/
<style>
body {
background-color: #d92626;
color: white;
}
.test1{
border-left: 5px solid black;
border-right: 5px solid black;
width:400px;
margin: 0 auto;
background: gray;
}
.test {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<body>
<div class="container">
<div class="test1">
<h1 align="center">
My text
</h1>
<h2 align="center">
MORE MORE MORE<br><br><br>
</h2>
<img class="test" src="http://www.velior.ru/wp-content/uploads/2009/05/Test-Computer-Key-by-Stuart-Miles.jpg" height="300" width="300">
</div>
</div>
</body>
Each image should have a transparent black overlay with a white number centered over it like "100", "200" etc. This number represents the amount of points needed to unlock the picture. How can I achieve this?
JSFiddle
HTML
<div class="wrapper">
<div class="scrolls">
<img src="http://placehold.it/150x150" style="height:100px"/>
<img src="http://placehold.it/150x150" style="height:100px"/>
<img src="http://placehold.it/150x150" style="height:100px"/>
<img src="http://placehold.it/150x150" style="height:100px"/>
<img src="http://placehold.it/150x150" style="height:100px"/>
<img src="http://placehold.it/150x150" style="height:100px"/>
<img src="http://placehold.it/150x150" style="height:100px"/>
<img src="http://placehold.it/150x150" style="height:100px"/>
</div>
</div>
CSS
.wrapper {
background:#f4f4f4;
margin: auto;
text-align: center;
position: relative;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-bottom: 20px !important;
width: 550px;
padding-top: 5px;
}
.scrolls {
overflow-x: scroll;
overflow-y: hidden;
height: 150px;
white-space:nowrap
}
.imageDiv img {
margin: 2px;
max-height: 150px;
cursor: pointer;
display:inline-block;
*display:inline;
*zoom:1;
vertical-align:top;
}
You need to wrap each image and overlay in an individual div. The overlay is then positioned absolutely over the image.
.wrapper {
background: #f4f4f4;
margin: auto;
text-align: center;
position: relative;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-bottom: 20px !important;
width: 550px;
padding-top: 5px;
}
.scrolls {
overflow-x: scroll;
overflow-y: hidden;
height: 150px;
white-space: nowrap;
padding-bottom: 25px;
}
.imageDiv {
margin: 2px;
max-height: 150px;
cursor: pointer;
display: inline-block;
*display: inline;
*zoom: 1;
vertical-align: top;
position: relative;
}
.imageDiv .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.25);
line-height: 150px;
color: transparent;
font-size: 2em;
text-align: center;
transition: all .5s ease;
}
.imageDiv:hover .overlay {
background: rgba(0, 0, 0, 0.55);
color: white;
;
}
.imgaDiv img {
display: block;
}
<div class="wrapper">
<div class="scrolls">
<div class="imageDiv">
<img src=" http://placehold.it/150x150 " />
<div class="overlay">100</div>
</div>
<div class="imageDiv">
<img src=" http://placehold.it/150x150 " />
<div class="overlay">100</div>
</div>
<div class="imageDiv">
<img src=" http://placehold.it/150x150 " />
<div class="overlay">100</div>
</div>
<div class="imageDiv">
<img src=" http://placehold.it/150x150 " />
<div class="overlay">100</div>
</div>
<div class="imageDiv">
<img src=" http://placehold.it/150x150 " />
<div class="overlay">100</div>
</div>
<div class="imageDiv">
<img src=" http://placehold.it/150x150 " />
<div class="overlay">100</div>
</div>
<div class="imageDiv">
<img src=" http://placehold.it/150x150 " />
<div class="overlay">100</div>
</div>
<div class="imageDiv">
<img src=" http://placehold.it/150x150 " />
<div class="overlay">100</div>
</div>
</div>
</div>
For a refinement/enhancement, you could do away with an actual overlay div and use a pseudo-element instead..if it's just styling. The technique remains the same.
I am trying to create a setup mimicking the one in the link with an image, text and a border all horizontally and vertically centered. I've tried a number of different ideas.
The below is the closest I've gotten but even then I'm still experiencing issues with the border displaying and things not being centered the way I want them.
<div style="max-width: 800px; height border: 1px solid #c6c6c6; border-radius: 5px; padding: 35px; margin-left: 60px; float: center; height: 220px; display: inline-block;">
<img src="image.gif" />
</div>
<div style="height: 220px; display: inline-block;">
<div style="position: relative; top: 50%;">
<h4 style="text-align: center;">Text 1/h4>
<p style="text-align: center;">Text 2<br />Text 3</p>
</div>
</div>
I would try using CSS tables, put the image and the text in separate block level elements that use display: table-cell, all of which are contained in a parent container using display: table.
.wrapper {
border: 1px solid gray;
border-radius: 5px;
display: table;
height: 220px;
margin: 0 auto;
}
.wrapper .item {
display: table-cell;
vertical-align: middle;
text-align: center;
min-width: 200px;
padding: 35px;
}
.item img {
display: block;
}
<div class="wrapper">
<div class="item">
<a href="www.google.com" target="_blank">
<img src="http://placehold.it/200x150" />
</a>
</div>
<div class="item">
<h4>Text Line One</h4>
<p>Text 2
<br />Text 3</p>
</div>
</div>
you should put inline-block on image and the parent div of text panel and vertical-align:middle .. would do that
.textpane{
height: 220px;
display: inline-block;
vertical-align:middle;
}
.imagepane{
width:50px;
height:50px;
display:inline-block;
vertical-align:middle;
max-width: 800px;
border: 1px solid #c6c6c6;
border-radius: 5px;
padding: 35px;
margin-left: 60px;
height: 220px;
}
<div class='imagepane'>
<img src="image.gif" />
</div>
<div class='textpane'>
<div style="position: relative; top: 50%;">
<h4 style="text-align: center;">Text 1/h4>
<p style="text-align: center;">Text 2<br />Text 3</p>
</div>
</div>
jsfiddle
Note
there is not such thing as float:center;