<style type="text/css">
div.imageSub { position: relative; }
div.imageSub img { z-index: 1; }
div.imageSub div {
position: absolute;
left: 15%;
right: 15%;
bottom: 0;
padding: 4px;
}
div.imageSub div.blackbg {
z-index: 2;
color: #000;
background-color: #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: 0.5;
}
div.imageSub div.label {
z-index: 3;
color: white;
}
</style>
<body>
<div class="imageSub" style="width: 300px;"> <!-- Put Your Image Width -->
<a href="../../../Downloads/Unnamed Site 2/stem studio.html"><img
src="../../../Downloads/Unnamed Site 2/PIC.jpg" alt="Something" width="300"
height="437" /></a>
<div class="blackbg">Hello</div>
<div class="label"> The Wolf</div>
</div><br />
<div class="imageSub" style="width: 300px;"> <!-- Put Your Image Width --><img
src="../../../Downloads/Unnamed Site 2/PIC.jpg" alt="Something" width="300" height="437"
/>
<div class="blackbg">Hello</div>
<div class="label"> The Wolf</div>
</div>
</body>
</html>
</body>
</html>
I am trying to align the two div images horizontally.
I borrowed the code for overlaying text on images from this website :
I just added a random pic and text to see if this code works, It works like perfectly well, but they come out vertically. How do I align them horizontally ? Will appreciate any help.
If I understood your problem, you need to have both images side by side. If so, you need to adjust your CSS and HTML to allow that:
See this working Fiddle Example!
HTML
<div class="imageSub" style="width: 300px;">
<a href="../../../Downloads/Unnamed Site 2/stem studio.html">
<img src="../../../Downloads/Unnamed Site 2/PIC.jpg" alt="Something" width="300" height="437" />
</a>
<div class="blackbg">Hello</div>
<div class="label"> The Wolf</div>
</div>
<div class="imageSub" style="width: 300px;">
<img src="../../../Downloads/Unnamed Site 2/PIC.jpg" alt="Something" width="300" height="437" />
<div class="blackbg">Hello</div>
<div class="label"> The Wolf</div>
</div>
Removed the <br>
CSS
div.imageSub {
position: relative;
float: left;
}
div.imageSub img {
z-index: 1;
}
div.imageSub div {
position: absolute;
left: 15%;
right: 15%;
bottom: 0;
padding: 4px;
}
div.imageSub div.blackbg {
z-index: 2;
color: #000;
background-color: #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: 0.5;
}
div.imageSub div.label {
z-index: 3;
color: white;
}
Added float: left; to the div.imageSub
EDITED
A working Fiddle Example based on the previous fix, adapted for a 3x2 visual presentation.
Remove the <br/>
Add css rules
.imageSub { float: left;}
.clear { clear: both; }
Add <div class="clear"/> to the end.
Don't forget step 3 in floating environments.
jsfiddle
Here's simple a 2 x 3 div solution using floats: http://jsfiddle.net/Fb6Jk/
Related
I'm implementing a slider where I like to display one slide at a time.
I've tried it using flexbox for the display container but unfortunately can't make it. How can I display only one slide at a time?
<div class="viewport">
<div class="contentCard">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/83/Marvell_Logo.svg" />
</div>
<div class="contentCard">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/83/Marvell_Logo.svg" />
</div>
<div class="contentCard">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/83/Marvell_Logo.svg" />
</div>
<button class="prev-next-btn prev"></button>
<button class="prev-next-btn next"></button>
</div>
*** CSS ***
.viewport {
display: flex;
}
img {
max-width: 100%
}
.prev-next-btn {
position: absolute;
width: 35px;
height: 35px;
background: green;
top: 35%;
}
.prev-next-btn.next {
right: 30px;
}
.prev-next-btn.prev {
left: 30px;
}
.contentCard {
width: 100%
}
Link to the code
I've been using bootstrap framework recently. I'm new to this framework.
so I'm trying to position an image next to some text in landing page. I use grid system of the bootstrap and it work. but when I come to push the image using position: absolute, and left:somePX, it make horizontal scroll and get out of the body of the page. what should I do to prevent this scrolling. I just want to cut the image and position it as I want.
Note: I've applied so many templates using only CSS with out bootstrap and I never get across on same problem.
thank you
here is my html code:
/* landing */
/*this is the image style*/
.landing {
padding-bottom: 100px;
margin-right: 0;
}
.landing .right .image {
position: relative;
}
.landing .right .image .back img {
position: absolute;
left: 100px;
}
.landing .right .image .mockups {
position: absolute;
top: -100px;
left: 100px;
}
/*this is text style I don't think the problem is here but I put it*/
.landing .left {
padding-top: 80px;
padding-left: 80px;
}
.landing .left h1 {
line-height: 1.3;
margin-bottom: 20px;
}
.landing .left p {
font-size: 15px;
margin-bottom: 20px;
}
.landing .left button {}
<div class="landing row">
<div class="col-md-6 left">
<div class="container">
<h1>Next generation digital banking</h1>
<p>Take your financial life online. Your Easybank account<br> will be a one-stop-shop for spending, saving,<br> budgeting, investing, and much more.</p>
<button class="btn linear" type="button">Request Invite</button>
</div>
</div>
<div class="col-md-6 right">
<div class="image">
<div class="back">
<img class="back-image img-fluid" src="images\bg-intro-desktop.svg" alt="">
</div>
<div class="front">
<img class="img-fluid mockups" src="images\image-mockups.png" alt="">
</div>
</div>
</div>
</div>
you can simply add to your body:
<style>
body{
overflow-x: hidden;
}
</style>
Cant do it right way.
Editing html is not allowed
<div class="photo_box ">
<h4>LEARN MORE</h4>
<div class="image_frame">
<div class="image_wrapper"><img class="scale-with-grid" src="#" alt="" width="" height=""></div>
</div>
<div class="desc">
<h4>Lipoparticles</h4>
Lipoparticles are virus-like particles that concentrate membrane proteins in their
native-conformation. </div>
should be like this :
I think this will help you.
#image{
width: 100px;
height: 100px;
border-radius:50%;
background-color: red;
position:relative;
}
#image>span{
position: absolute;
color:yellow;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
#image:hover{
/*image will be selected when hover*/
/*apply changes you want*/
filter:grayscale(40%);
}
#image:hover>span{
/*span will be selected when image is hover*/
color: blue;
}
/*For advance use: pseudo element*/
/*#image:hover::after{
content:'';
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: rgba(0,0,0,20%);
}*/
<div id="image">
<span>Text</span>
</div>
Learn about Beginner Concepts:Selectors and different selectors
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 am having trouble placing a multiple text in front of multiple images. The way I can achieve this is using absolute and relative positioning, with only 1 text above 1 image. But when used in multiple id's it is not working. Please show me a way. Thank you
#box1{
float:left;
position: relative;
z-index: 10;
width: 100px;
}
#boxtext1{
float:left;
width:100px;
position: absolute;
z-index: 51;
}
#box2{
float:left;
position: relative;
z-index: 11;
width: 100px;
}
#boxtext2{
float:left;
width:100px;
position: relative;
z-index: 50;
}
http://jsfiddle.net/k9b0vgeg/3/
If there's not some other reason to be using IDs (i.e. javascript), using classes would simplify this a lot.
.box {
float:left;
position:relative;
width:100px;
}
.box-text {
position:absolute;
top:0;
left:0;
}
<div class="box">
<img src="image.jpg" width="100"/>
<div class="box-text">Some Text 1</div>
</div>
<div class="box">
<img src="image.jpg" width="100"/>
<div class="box-text">Some Text 2</div>
</div>
Place the text div inside the main box div instead of placing it outside. There is no need to use float with the absolute positioned div. To adjust the left,right offset, add left and right css rules too.
HTML:
<div id="box1">
<img src="image.jpg" width="100px" />
<div id="boxtext1">Some text1</div>
</div>
<div id="box2">
<img src="image.jpg" width="100px" />
<div id="boxtext2">Some text2</div>
</div>
CSS:
#box1 {
float:left;
position: relative;
z-index: 10;
width: 100px;
}
#boxtext1 {
width:100px;
position: absolute;
z-index: 51;
bottom:10px;
}
#box2 {
float:left;
position: relative;
z-index: 11;
width: 100px;
}
#boxtext2 {
width:100px;
position: absolute;
z-index: 50;
bottom:10px; //for placement.
}
Demo: http://jsfiddle.net/lotusgodkk/k9b0vgeg/6/
You did not put your HTML code in the question, assuming your HTML is what is shown in your JSFIDDLE:
put your #boxtext1/2/3 etc inside your #box1/2/3 etc. respectively and style the box text accordingly.
DEMO : JSFIDDLE
HTML:
<div id="box1">
<img src="image.jpg" width="100px"/>
<div id="boxtext1">
Some text1
</div>
</div>
<div id="box2">
<img src="image.jpg" width="100px"/>
<div id="boxtext2">
Some text2
</div>
</div>
CSS:
#box1{
float:left;
position: relative;
z-index: 10;
width: 100px;
}
#boxtext1{
float:left;
width:100px;
position: absolute;
margin-top:-100px;
margin-left:5px;
}
#box2{
float:left;
position: relative;
z-index: 10;
width: 100px;
}
#boxtext2{
float:left;
width:100px;
position: absolute;
margin-top:-100px;
margin-left:5px;
}