I'm trying to build a website and to do so I followed this html code and this css code; this guy created a grid of 12 cool images with logos and animations, but they're not linkable. What I would like to do is to make them linkable and to do so I created this code but it's giving me weird stuff; any help please?
<div class="portfolio-items-wrapper">
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(Immagini/Crypto.jpg)">
<img src="Immagini/Crypto.jpg">
</div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="Immagini/Logo/Bitcoin.png">
</div>
</div>
</div>
</div>
I'd suggest not making the images background images if you want to make them into links. Try this:
<div class="portfolio-img">
<img src="Immagini/Crypto.jpg">
</div>
And the CSS:
.portfolio-img {
height: 350px;
width: 100%;
}
Check this solution
.click-img {
position: relative;
display: block;
}
<a class="click-img" href="#" title="Clickable background image">
<img src="https://picsum.photos/seed/picsum/300/300" alt="Your Image">
</a>
Related
I have 3 horizontally aligned images. I set a background image (background image) for the aligned images as below. When I run my code, the background image flows over the images. I want the 3 aligned images to appear on top of the background image. I tried to use box-shadow which couldn't work. I don't want the background image to cross over any of the 3 aligned images. How do I do this please?
HTML
<div class="col-lg-12">
<img src="images/background.png" alt="Change">
<div class="img">
<div class="column-img">
<img src="/images/pic.jpg" alt="" width="426" height="479">
</div>
<div class="column-img">
<img src="/images/pic.jpg" alt="" width="425" height="479">
</div>
<div class="column-img">
<img src="/images/change.jpg" alt="" width="426" height="479">
</div>
</div>
</div>
CSS
//how I align my 3 images horizontally.
.column-img {
float: left;
width: 33.33%;
padding: 5px;
}
Hm, so you want the background.png to appear behind the other images? If you insist on having it within the DOM, you'd need to remove it from the document flow. Something like this:
.column-img {
float: left;
width: 33.33%;
padding: 5px;
}
.background {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.background-anchor {
position: relative;
}
<div class="col-lg-12 background-anchor">
<img class="background" src="https://placekitten.com/1300/1300" alt="Change">
<div class="img">
<div class="column-img">
<img src="https://placekitten.com/426/479" alt="" width="426" height="479">
</div>
<div class="column-img">
<img src="https://placekitten.com/425/479" alt="" width="425" height="479">
</div>
<div class="column-img">
<img src="https://placekitten.com/426/479" alt="" width="426" height="479">
</div>
</div>
</div>
css :
.img {
background-image: url('../images/pic.jpg');
}
this is the right way to put a background image in css
get more information from : W3school
So I have footer section on the website I'm currently building, and the problem is order of them showing. I want to social icons be above ©
Have a look: footer
html:
<div id="footerbot">
<div class="container">
<div class="row">
<div class="col-md-6">
<h5 class="fbh">©2018 - Appo, All Right Reserved</h5>
</div>
<div class="col-md-6">
<img src="img/facebook.png" href="#">
<img src="img/twitter.png" href="#">
<img src="img/dribble.png" href="#">
<img src="img/gplus.png" href="#">
<img src="img/youtube.png" href="#">
</div>
</div> <!-- end of row -->
</div>
css:
#footerbot {
background-color: rgba(34, 48, 71, 0.8);
}
#footerbot img {
display: block;
float: right;
top: 50%;
padding-top: 35px;
padding-left: 15px;
}
#footerbot h5 {
color: #00FFF0;
line-height: 100px;
}
I tried to add class 'order-md-6' to each div with col-md-6, but first of all it didn't work, and secondly it broke layout - it 'pushed' both elements to center. Is it even possible in bootstrap4? I also have a problem centering these items u can see on image I've upload. I'm struggling with this for 2hours and I have no idea how to get this done. I would appreciate any help. Thanks
Bootstrap 4 uses flexbox to position the columns in their rows so you can add the following to your CSS to the control the order of the columns:
.col-md-6:last-child {
order: -1;
}
Not sure if what you provided is the full code sample of your footer or not, but if that's your full html, you're missing a closing tag.
Also, assuming all you want are the icons to go above the copyright line and centered, try this:
#footerbot .socialIcons {
text-align: center;
}
<div id="footerbot">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="socialIcons">
<img src="img/facebook.png" href="#">
<img src="img/twitter.png" href="#">
<img src="img/dribble.png" href="#">
<img src="img/gplus.png" href="#">
<img src="img/youtube.png" href="#">
</div>
<h5 class="fbh">©2018 - Appo, All Right Reserved</h5>
</div>
</div> <!-- end of row -->
</div>
</div>
It's an know issue that "with fluidly sized images, before the images load, the image containers initially appear collapsed."
I've fixed the issue for banner image and product images adding div and using this css hack:
height: 0;
overflow: hidden;
padding-bottom: 66.6%;
position: relative;
But can't understand how to fix it for awards icons block.
Firstly image containers initially appear collapsed, than it's loading one big icon, than 2nd, than resize them - would like it to know correct sizes before hand so it will look smooth to the eye.
Here is the screen recording of the issue
Here is pen for award icons block > https://codepen.io/anon/pen/borJXK
HTML
<div class="awards-memberships-container" data-modal="#awards-memberships-modal">
<div class="awards-memberships">
<div class="item">
<img src="http://via.placeholder.com/188x132"/>
</div>
<div class="item">
<img src="http://via.placeholder.com/146x146"/>
</div>
<div class="item">
<img src="http://via.placeholder.com/204x133"/>
</div>
</div>
</div>
CSS
img{vertical-align:bottom;}
body section img{max-width:100%;height:auto;}
.awards-memberships-container{background:#FFF;border-bottom:1px solid #ccc;cursor:pointer;}
.awards-memberships{display:flex;padding:5px 15px;}
.awards-memberships .item{padding:0px 10px;}
Try this and tell me how it goes.
body section img {max-width:100%;height:auto;}
.awards-memberships-container {background:#FFF;border-bottom:1px solid #ccc;cursor:pointer;}
.awards-memberships {display:flex;justify-content:center;align-items:center;padding:5px 15px;}
.awards-memberships .item {padding:0px 10px;}
.awards-memberships .item img {display:block;width:auto;height:auto;max-width:100%;}
<div class="awards-memberships-container" data-modal="#awards-memberships-modal">
<div class="awards-memberships">
<div class="item">
<img src="http://via.placeholder.com/188x132" alt="img1">
</div>
<div class="item">
<img src="http://via.placeholder.com/146x146" alt="img2">
</div>
<div class="item">
<img src="http://via.placeholder.com/204x133" alt="img3">
</div>
</div>
</div>
So I'm pretty new to HTML/CSS and I'm doing this lesson from CodeAcademy and I'm trying to replicate this: https://s3.amazonaws.com/codecademy-content/projects/junction/index.html
The problem is that I'm not being able to make those images in the middle look bigger, they're very small, and I have no idea how to resize them.
Here's my version: https://jsfiddle.net/eb3roj0j/1/
<!--supporting-->
<div class="supporting">
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="https://goo.gl/HuNcSi" class="img-responsive" alt="">
<h2>Read</h2>
<p>Discover new stories and follow your favorite writers.</p>
</div>
<div class="col-md-4">
<img src="https://goo.gl/Vxo5z5" class="img-responsive" alt="">
<h2>Write</h2>
<p>Create stories about our world, or entirely new worlds.</p>
</div>
<div class="col-md-4">
<img src="https://goo.gl/93x9GD" class="img-responsive" alt="">
<h2>Talk</h2>
<p>Join the conversation by talking with your favorite readers and your fans.</p>
</div>
</div>
</div>
</div>
in your css you have:
.row img
{
position: relative;
float: left;
max-width: 35px;
max-height: 35px;
}
this is constraining your image size
im making a container that contains 3 images and three "text bits"
My problem is that I cant seem to get the text to appear on the right side of each image.
Here a SS: http://imgur.com/ujBIjYC
The html:
<div class="textandimg">
<div class="image">
<a href="#">
<img src="img/belahotellforside.png" alt="belahotellforside">
</a>
</div>
<div class="text">
<p>asdfer</p>
</div>
<div class="image">
<a href="#">
<img src="img/caprocatforside.png" alt="caprocatforside">
</a>
</div>
<div class="text">
<p>asdfer</p>
</div>
<div class="image">
<a href="#">
<img src="img/granhotellforside.png" alt="granhotellforside">
</a>
</div>
<div class="text">
<p>asdfer</p>
</div>
</div>
and the css:
.textandimage{
clear:both;
}
.image{
float:left;
width: 100%;
margin-left: 10px;
}
.text{
float:left;
}
If I put :
.text{
float:right;
}
The text appears on the right side. But its still inline with the picture. And I want the text to be side by side.
Appreciate any help. Thanks.
If your div with image class has setted width: 100% it take 100% of the width. So you can remove it or set to an value in "px".
Delete all that CSS and just put this:
.image{
float: left;
margin-left: 10px;
}
All you want is just to float the images to the left of the text divs, so that's all you need.
http://jsfiddle.net/M8CQD/
Edit: From your comment, it also looks like you need to put each image and text div together in a div in order to push the images down below the preceding image.
<div class='row'>
<div class="image">
<a href="#">
<img src="img/belahotellforside.png" alt="belahotellforside">
</a>
</div>
<div class="text">
<p>asdfer</p>
</div>
</div>