Having some trouble getting the desired effect on an image overlay with responsive image. What I want is upon hovering over the image, the colour block and text to appear as shown, but for the text to be in the vertical centre of the div. I have tried vertical-middle but it doesn't seem to be working. Can't make the width and height set value as need to collapse and expand. If anyone can help i'd appreciate it. Thanks
Code, CSS below
.overlay-box {
position: relative;
}
.overlay {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(38,150,198,0.5);
}
.overlay p {
color: #ffffff;
text-align: center;
}
.overlay-box:hover .overlay {
display: block;
}
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-3" style="margin-bottom: 20px;">
<div class="overlay-box">
<a href="#" target="_blank">
<div class="overlay">
<p>1st line<br>2nd line<br><br>
3rd line</p>
</div>
<img src="http://placehold.it/2000x2000" class="img-responsive "/></a>
</div>
</div>
</div>
img{
max-width: 100%;
height: auto;
}
.overlay-box {
position: relative;
}
.overlay {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(38,150,198,0.5);
}
.overlay:before {
content: '';
display: inline-block;
width: 1px;
height: 100%;
vertical-align: middle;
border: 1px solid;
}
.overlay p {
color: #ffffff;
text-align: center;
display: inline-block;
vertical-align: middle;
width: 90%;
}
.overlay-box:hover .overlay {
display: block;
}
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-3" style="margin-bottom: 20px;">
<div class="overlay-box">
<a href="#" target="_blank">
<div class="overlay">
<p>1st line<br>2nd line<br><br>
3rd line</p>
</div>
<img src="http://placehold.it/2000x2000" class="img-responsive "/></a>
</div>
</div>
</div>
You need to wrap the overlay with another div(since tables seem to ignore their height and width when they're absolute) and add position:absolute to it. Then add dislpay:table and dislpay:table-cell; vertical-align:middle for the child divs.
Check out this fiddle: https://jsfiddle.net/65cvzcev/
Related
I'm trying to align several div containers with several other divs, but am having a problem.
I can't get the red (checkbox-container) divs to align next to the grey (button-container) divs.
Here's what it looks like now (I think the button being cut off at the bottom is just an issue with setting the developer options to view as mobile when I took a screenshot, because it looks alright in codepen).
And this is how I'm trying to make it look.
Could anyone help me out? I was thinking that I could have each checkbox as a child element of the button container, and then position it relative to that. The problem with that method is I want to ensure that when the screen is resized, the red checkbox-container divs don't overlap with anything in the green character-container div. So I figured having a separate div would be the best way to keep everything where it needs to be when the screen is resized, unless I'm mistaken?
Here's a codepen with the full code:
https://codepen.io/TheNomadicAspie/pen/NWjKwxE
And here's the relevant css:
.bottom-container {
position: absolute;
height: 31.8%;
width: 100vw;
background-color: green;
bottom: 0%;
}
.checkbox-grid {
float: right;
background-color: blue;
width: 7.45vh;
height: 100%;
}
.checkbox-container {
background-color: red;
width: 88%;
height: 22.5%;
top: -0.5vh;
margin-top: 0.5vh;
}
.buttons-grid {
float: right;
background-color: pink;
width: 38.2%;
right: 0%;
}
.button-container {
background-color: purple;
width: 88%;
height: 90%;
right: 0%;
margin-top: 0.5vh;
}
.buttons-grid button {
position: relative;
display: block;
background: grey;
height: 7.45vh;
width: 100%;
top: -0.5vh;
right: 0;
text-align: center;
}
And the HTML:
<div id="menu_bar" , class="menu-bar">
<div id="logo", class="logo">
</div>
<div id="title", class="title">Title</div>
<div id="menu", class="menu">
</div>
</div>
<div id="display" , class="display">
<div id="speech_bubble" , class="speech-bubble">
<div id="email_container" class="email-container">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
<button id="submit_email_btn" class="buttons">Submit</button>
</div>
<div id="question_text" class="question-text">Question</div>
</div>
</div>
</div>
<div id="bottom_container" , class="bottom-container">
<div id="buttons_grid" , class="buttons-grid">
<div id="button_1_container" , class="button-container">
<button>Button 1</button>
</div>
<div id="button_2_container" , class="button-container">
<button>Button 2</button>
</div>
<div id="button_3_container" , class="button-container">
<button>Button 3</button>
</div>
<div id="button_4_container" , class="button-container">
<button>Button 4</button>
</div>
</div>
<div id="checkbox_grid" , class="checkbox-grid">
<div id="checkbox_1_container" , class="checkbox-container">
</div>
<div id="checkbox_2_container" , class="checkbox-container">
</div>
<div id="checkbox_3_container" , class="checkbox-container">
</div>
<div id="checkbox_4_container" , class="checkbox-container">
</div>
</div>
<div id="character_container" , class="character-container"></div>
</div>
</div>
I was able to get it working. I aligned checkbox-grid to the top of bottom-container, then added a margin-bottom to each checkbox-container until the spacing was correct, and added a margin-right to checkbox-grid to add spacing. Looks perfect now.
.bottom-container {
position: absolute;
height: 31.8%;
width: 100vw;
background-color: green;
bottom: 0%;
}
.checkbox-grid {
display: absolute;
float: right;
background-color: blue;
width: 7.45vh;
height: 100%;
margin-right: 1vh;
}
.checkbox-container {
background-color: red;
width: 100%;
height: 22.5%;
margin-bottom: 0.8vh;
}
.buttons-grid {
float: right;
background-color: pink;
width: 38.2%;
right: 0%;
}
.button-container {
background-color: purple;
width: 88%;
height: 90%;
right: 0%;
margin-top: 0.5vh;
}
.buttons-grid button {
position: relative;
display: block;
background: grey;
height: 7.45vh;
width: 100%;
top: -0.5vh;
right: 0;
text-align: center;
}
.container {
display: inline-block;
width: 150px;
border: 1px solid black;
}
.letter {
position: absolute;
top: 0;
left: 0;
font-size: 21px;
}
<div class='container'>
<p class='letter'>A</p>
<p class='word'>A pple</p>
</div>
<div class='container'>
<p class='letter'>B</p>
<p class='word'>B anana</p>
</div>
<div class='container'>
<p class='letter'>C</p>
<p class='word'>C arrot</p>
</div>
I know That this Design is stupid and can be made easily,
But I want to learn using it How I can I make the .letter position same as the First Letter using position: absolute; left:0; top: 0;,
I just want to place it in middle-left with no-padding or spacing or marging at all.
Something like vertical-align: middle; text-align: left; But with the effect of Absolute position of no spacing at all.
But it keeps moving all the letters to left of page above itself instead of the parent element itself after adding left: 0;
How can I do that?
you can add position:relative to .container
.container {
position: relative;
display: inline-block;
width: 150px;
border: 1px solid black;
}
.letter {
position: absolute;
top: 0;
left: 0;
font-size: 21px;
}
<div class='container'>
<p class='letter'>A</p>
<p class='word'>A pple</p>
</div>
<div class='container'>
<p class='letter'>B</p>
<p class='word'>B anana</p>
</div>
<div class='container'>
<p class='letter'>C</p>
<p class='word'>C arrot</p>
</div>
I'm trying to specify content specifically somewhere on the page, How can i do this so that it'll always be in the exact same spot even when screen size changes?
jsfiddle = https://jsfiddle.net/4pkgfgwh/1/
<div class="container">
<img src="http://i.imgur.com/iGIFvH6.png" style="width:354px;height:228px;">
<div class="display">
<p> Here is some Text</p>
</div>
</div>
.container {
text-align: center;
}
.display {
position:absolute;
TOP:45px;
LEFT:350px;
}
Use position: relative on the parent container:
HTML
<div class="container">
<div class="image-container">
<img src="http://i.imgur.com/iGIFvH6.png">
<div class="display">
<p> Here is some Text</p>
</div>
</div>
</div>
CSS
.container {
width: 100%;
text-align: center;
}
.image-container {
display: inline-block;
position: relative;
width: 354px;
height: 228px;
}
.container img {
width: 100%;
}
.display {
position: absolute;
top: 10px;
left: 200px;
}
JSFiddle demo: https://jsfiddle.net/ompfnjc5/2/
I'm desperately trying to format two images side by side using CSS.
I want the first one to be fixed-size and the second one to take up the remaining width (but it should stop growing when it has the same height as the first one). This is my code:
<span style="height:80px; width:100%">
<img src="images/navicon.png" style="width:60px; height:60px; padding:10px 10px 10px 10px; "/>
<img src="images/logo.png" style="max-height:60px; padding: 10px 10px 10px 10px;" />
</span>
But instead of the second image shrinking (maintaining aspect-ratio) when there is not enough space, the line breaks.
Thanks for any help!
This possible solution requires CSS calc(), see the demo follows.
div {
height: 100px;
overflow: hidden;
font-size: 0;
}
span {
display: inline-block;
vertical-align: top;
}
span:nth-child(2) {
width: calc(100% - 100px);
}
span:nth-child(2) img {
width: 100%;
height: auto;
}
<div>
<span><img src="http://lorempixel.com/100/100" /></span>
<span><img src="http://lorempixel.com/100/100" /></span>
</div>
JSFiddle: http://jsfiddle.net/Low7k16d/
HTML:
<div class="image-container">
<div class="image"><img src="http://lorempixel.com/160/60/abstract/1"></div>
<div class="image image-auto"><img src="http://lorempixel.com/100/60/abstract/1"></div>
</div>
<div class="image-container">
<div class="image"><img src="http://lorempixel.com/60/60/abstract/1"></div>
<div class="image image-auto"><img src="http://lorempixel.com/1000/60/abstract/1"></div>
</div>
<div class="image-container">
<div class="image"><img src="http://lorempixel.com/1000/60/abstract/1"></div>
<div class="image image-auto"><img src="http://lorempixel.com/1500/600/abstract/1"></div>
</div>
CSS:
.image-container {
width: 100%;
display: flex;
align-items: flex-start;
}
.image {
margin: 10px;
padding: 0;
flex-shrink: 0;
}
.image img {
width: 100%;
margin: 0;
padding: 0;
max-height: 80px; /*Line added to limit height*/
}
.image-auto {
flex-shrink: 1;
height: auto;
}
And I updated the Pen: http://codepen.io/czoka/pen/XbJXVO
I don't completely understand your question but this is what I thought you mean.
NOTE: this is my updated version of sdcr's answer.
CSS:
div {
height: 80px;
font-size: 0;
}
span {
display: inline-block;
vertical-align: top;
padding:10px;
}
span:nth-child(1) img {
max-height: 60px;
}
span:nth-child(2) img {
width: 100%;
HTML
<div>
<span><img src="http://lorempixel.com/100/100" /></span>
<span><img src="http://lorempixel.com/output/people-q-c-924-67-9.jpg" /></span>
</div>
See jsfiddle:
http://jsfiddle.net/Low7k16d/4/
I have a div with width: 180px; and height: 180px;.
How can I center a fontawesome icon horizontally and vertically inside the container?
Note: i may also add text below the icon
<div style="width:180px; height:180px; float:left;">
<i class="fa fa-search fa-4x"></i>
</div>
should look something like this:
Try this:
.centered{
position:relative;
top:50%;
left:50%;
transform:translate(-50%,-50%)
}
.container{
width:100px;
height:100px;
}
On mobile.
You can do it like this
#search{
background: gray;
width:180px;
height:180px;
float:left;
line-height: 180px;
text-align: center;
vertical-align: bottom;
}
#search > p {
margin-top: -155px;
}
Working example http://jsfiddle.net/kasperFranz/h91p8w4e/3/ (using icon instead of fa in the example, but shouldn't affect the result.)
I'm probably too late here, but it's a common question, so here's a simple working idea, the interesting side of it is that it adapts to the container size:
span{
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
text-align: center;
width: 15px;
height: 15px;
display: block;
}
Asuming to my comment, here is a JSFIDDLE
Without setting relative or absolute
html
<div class="myDiv">
<div class="content_wrapper">
<!--i class="fa fa-search fa-4x">test</i-->
<i class="icon-search icon-4x"></i><br />
<span class="myText">Search</span>
</div>
</div>
css
.myDiv{
width: 180px;
height: 180px;
float: left;
background: #ccc;
text-align: center;
display: table;
}
.content_wrapper{
display: table-cell;
vertical-align: middle;
}
.myText{
font-weight: bold;
font-size: 20px;
}
CSS
/* This parent can be any width and height */
.block {
text-align: center;
background:#ccc;
margin-bottom:10px;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can
also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
HTML
<div class="block" style="height: 300px;">
<div class="centered">
<h1>Some text</h1>
<p>p1</p>
</div>
</div>
<div class="block" style="height: 200px;">
<div class="centered">
<h1>Some text</h1>
<p>p2</p>
</div>
</div>
<div class="block" style="height: 600px;">
<div class="centered">
<h1>Some text</h1>
<p>p3</p>
</div>
</div>
DEMO
Update 1:
DEMO
I know it's a bit late and you probably already figured this out.
I was able to achieve what you were looking for by wrapping the icon and text in a div then adding padding to that.
See the attached pen.
http://codepen.io/ForTheJim/pen/YPxveR
<p data-height="268" data-theme-id="0" data-slug-hash="YPxveR" data-default-tab="result" data-user="ForTheJim" class='codepen'>See the Pen <a href='http://codepen.io/ForTheJim/pen/YPxveR/'>Centering Icon Question</a> by Jim (<a href='http://codepen.io/ForTheJim'>#ForTheJim</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
Short way just add display: grid; place-items: center; to your div and your ready to go.
like this:
<div style="width:180px; height:180px; display: grid; place-items: center;">
<i class="las la-user-circle"></i>
</div>