So currently, my website's front page has 9 interactive boxes that change color when hovered over. What I want to do is put background images into each of these boxes (and hopefully each image can scale to the size of the box). Ultimately, I want these images to also fade/brighten upon interaction or mouse over. Here is my website: http://thefloodplains.com/
Here's some of my CSS code:
.col-md-4 {
color:#00A5D1;
height:300px;
border: 1px solid #FF8B6F;
}
.col-md-4:hover{
background-color: #FFE097;
}
.col-md-4 h3 {
position: relative;
top: 40%;
transform: translateY(-50%);
}
/* Basic Structure
-------------------------------------------------------------- */
h3 {
font-size:14px;
text-align:center;
font-family: 'Buernard', Garamond, "Buenard", "EB Garamond",'EB Garamond';
}
And here's the front page's HTML:
<style>
h3 {
font-size:36px;
font-style: bold;
text-align:center;
font-family:'Buernard', Garamond, "Buenard", "EB Garamond",'EB Garamond';
}
.1 {
background-image: url('');
max-width: 100%;
max-height: 100%;
}
.2 {
background-image: url('');
max-width: 100%;
max-height: 100%;
}
.3 {
background-image: url('../images/divbg.png');
max-width: 100%;
max-height: 100%;
}
.4 {
background-image: url('Birds%20on%20Wire.jpg');
max-width: 100%;
max-height: 100%;
}
.5 {
background-image: url('Shark Cans Logo.jpg');
max-width: 100%;
max-height: 100%;
}
.6 {
background-image: url('Ocean%20Water.jpg');
max-width: 100%;
max-height: 100%;
}
.7 {
background-image: url('Piano.jpg');
max-width: 100%;
max-height: 100%;
}
.8 {
background-image: url('../images/divbg.png');
max-width: 100%;
max-height: 100%;
}
.9 {
background-image: url('../images/divbg.png');
max-width: 100%;
max-height: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<a href="About.html" title="About the site and Author"><div class="col-md-4">
<h3>About</h3>
</div></a>
<a href="Articles.html" title="Original Articles and Content"><div class="col-md-4">
<h3>Articles</h3>
</div>
<a href="Coding Corner.html" title="Coding Corner - Code for a Variety of Projects"><div class="col-md-4">
<h3>Coding Corner</h3>
</div></a>
</div>
<div class="row">
<a href="Contact - Social.html" title="Contact The Floodplains & The FloodShark"><div class="col-md-4 4">
<h3>Contact & Social</h3>
</div></a>
<a href="The FloodShark Main.html" title="The FloodShark Music and Media"><div class="col-md-4 5">
<h3>
The FloodShark
Music
</h3>
</div></a>
<a href="Floodplain Productions.html" title="Floodplain Productions - virtual record label"><div class="col-md-4 6">
<h3>Floodplain Productions</h3>
</div></a>
</div>
<div class="row">
<a href="Classical Corner.html" title="Classical Corner - A nook dedicated to sharing and categorizing classical music"><div class="col-md-4">
<h3>Classical Corner</h3>
</div></a>
<a href="Gallery.html" title="Images, Photographs, and Album Art"><div class="col-md-4">
<h3>Gallery</h3>
</div></a>
<a href="Contribute - Support - Donate.html" title="Contribute to The Floodplains!"><div class="col-md-4">
<h3>Contribute / Support</h3>
</div></a>
</div>
</div>
</body>
</html>
As you can probably see, I've gone ahead and tried to give a background (WIP) image to be within each of the 9 boxes' DIV elements (as indicated by .1, .2, .3, etc...). Unfortunately, upon testing my code, nothing's changed. I feel like I'm dancing around the solution.
As an added caveat, I want the selected images to automatically scale to the size of the boxes - I'm not quite sure how hard this is to do, but I'd love any advice on how to get this to happen.
Any and all advice would be deeply appreciated. Have a wonderful day and night :)
Making background images cover their container is this:
div {
background-image:url(../images/please-dont-use-spaces.jpg); //add the background image
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
}
Also consider something like this instead of adding a whole bunch of classes you probably don't need:
.block {
width: 100%;
height: 100%;
}
.block:nth-of-type(1){
background-image:url(./images/background1.jpg);
}
.block:nth-of-type(2){
background-image:url(./images/background2.jpg);
}
/* etc */
Related
I'm having an issue getting the hover to work on my project. I used this code in a different project and worked fine (although I did not use the background image in that project). Ive tried modifying the hover to access ID and Class on separate blocks, no luck. Thanks for taking a look!
Here's my HTML:
<div class="divTableRow">
<a href="#">
<div class="divTableCell in-news">
<h3>In the News</h3>
<div class="hvr">
<p>Read about the buzz viveve is creating</p>
</div>
</div>
</a>
<a href="#">
<div class="divTableCell" id="investor">
<h3>Investor News</h3><div class="hvr">
<p>Read about Viveve's financials</p>
</div>
</div>
</a>
</div>
Here's my CSS:
.in-news {
background-color: #C4D600;
}
.in-news:hover {
background-color: none;
background-image: url(Images\InTheNews.png);
background-size: 50%;
background-repeat: no-repeat;
background-position: top 20px center;
}
#investor {
background-color: #8999BA;
}
#investor:hover {
background-color: none;
background-image: url(images\InvestorNews.png);
background-size: 50%;
background-repeat: no-repeat;
background-position: top 20px center;
}
.divTableCell {
display: table-cell;
width: 280px;
height: 280px;
float: left;
position: relative;
margin: 3px;
}
.hvr {
display: none;
}
.hvr:hover {
display:inline;
}
Thanks again.
Looks like you are missing quotes around the images URL. So it should be:
background-image: url("images\InvestorNews.png");
instead of:
background-image: url(images\InvestorNews.png);
Here's a working example: https://codepen.io/wedgess/pen/YOpBoq
I want to have a blurry background image for a div container. But if I set the blur filter the edges also will get blurry causing the blurred image to overflow it's frame. This is what I tried till now:
.one {
height: 400px;
width: 400px;
border: 1px solid black;
/* background-image: url("https://i.imgur.com/JCyxUxA.jpg"); */
/* background-repeat: no-repeat;
background-position: center;
background-size: contain;
*/}
.a {
background-image: url("https://i.imgur.com/JCyxUxA.jpg");
}
.b {
background-image: url("https://i.imgur.com/O1jVhYH.jpg");
}
.thing {
object-fit: contain;
width: 100%;
height: 100%;
}
.bl {
filter: blur(20px);
}
<div class="one t">
<img class="thing" src="https://i.imgur.com/JCyxUxA.jpg" alt="">
</div>
<div class="one t">
<img class="thing bl" src="https://i.imgur.com/JCyxUxA.jpg" alt="">
</div>
<!-- <div class="one a">
</div>
<div class="one b">
</div>
-->
Try adding overflow:hidden; to its container (class one in your case).
This will hide every part of the children elements that is overflowing its container
I can make it work but as soon as I try resizing it to make sure it's responsive, it scales very weird. Basically, I need the pictures to be their natural size and be lined up next to each other without any white space. Also, the text needs to in the middle.
I put it all in a JSFiddle and here's a GIF. The gif is more important so you can see my problem.
Thanks for your help, I just can't figure this out.
Thank you in advance for your help.
<div class="aktivnostiList">
<div class="spacer">
</div>
<div class="coverRevija">
<img class="covers" src="file:\\C:\Users\andre\Desktop\karolin\web\hr\projekti\revija\revijacover.jpg">
<div id="linkRevija"><h3 id="emphasis">Modna revija</h3></div>
</div>
<div class="spacerSmall"></div>
<div class="coverCajanka">
<img class="covers" src="file:\\C:\Users\andre\Desktop\karolin\web\hr\projekti\cajanka\cajankacover.jpg">
<div id="linkCajanka"><h3 id="emphasis">Čajanka</h3></div>
</div>
<div class="spacerSmall"></div>
<div class="coverIzlozba">
<img class="covers" src="file:\\C:\Users\andre\Desktop\karolin\web\hr\projekti\izlozba\izlozbacover.jpg">
<div id="linkIzlozba"><h3 id="emphasis">Izložba</h3></div>
</div>
.aktivnostiIntro{
width: 75%;
height: auto;
margin: auto;
margin-top: 100px;
text-align: center;
}
.covers{
width: 100%;
position: absolute;
z-index: -1;
left: 0;
}
.aktivnostiList{
text-align: center;
}
.coverRevija{
line-height: 227px;
}
.coverCajanka{
line-height: 227px;
}
.coverIzlozba{
line-height: 227px;
}
Your images are scaling proportionately - as you reduce the width, the height is reducing too (to maintain the image's aspect ratio). If you want the images to keep their height, you could change them from <img> tags in the html to background-images in the css. e.g. https://jsfiddle.net/9rgk6nuo/7/
HTML
<div class="aktivnostiList">
<div class="spacer">
</div>
<div class="covers-wrapper coverRevija">
<div id="linkRevija"><h3 id="emphasis">Modna revija</h3></div>
</div>
<div class="spacerSmall"></div>
<div class="covers-wrapper coverCajanka">
<div id="linkCajanka"><h3 id="emphasis">Čajanka</h3></div>
</div>
<div class="spacerSmall"></div>
<div class="covers-wrapper coverIzlozba">
<div id="linkIzlozba"><h3 id="emphasis">Izložba</h3></div>
</div>
</div>
CSS
.aktivnostiIntro{
width: 75%;
height: auto;
margin: auto;
margin-top: 100px;
text-align: center;
}
.covers-wrapper {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.aktivnostiList{
text-align: center;
}
.coverRevija{
background-image: url('http://placehold.it/1200x300'); //change this to your image source
line-height: 227px;
}
.coverCajanka{
background-image: url('http://placehold.it/1200x300'); //change this to your image source
line-height: 227px;
}
.coverIzlozba{
background-image: url('http://placehold.it/1200x300'); //change this to your image source
line-height: 227px;
}
Try this update your css .covers class
` .covers{
min-width: 100%;
height:100%;
position: absolute;
z-index: -1;
left: 0;
}`
I have a square div with a known size.
I want to show an image with an unknown size in it.
I want:
. to use the maximum space in the div to show the image while keeping the size ratio of the image.
. the image to be centered, either horizontally if the image is taller than wider, or vertically if the image is wider than taller.
. I don't want the image to be cropped
. I don't want the image to be stretched and use the whole div
. The image should keep its ratio
I'm fine with either an html img tag or a CSS background image property
I found a solution thanks to #CBroe and his suggestion to use background-size
.container {
width: 100px;
height: 100px;
border: 1px solid black;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.container1 {
background-image: url('http://placehold.it/30x50');
}
.container2 {
background-image: url('http://placehold.it/50x30');
}
.container3 {
background-image: url('http://placehold.it/500x300');
}
.container4 {
background-image: url('http://placehold.it/300x500');
}
<div class="container container1">
</div>
<div class="container container2">
</div>
<div class="container container3">
</div>
<div class="container container4">
</div>
.container {
width: 100px;
height: 100px;
border: 1px solid black;
position: relative;
}
img {
max-width: 100px;
max-height: 100px;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<div class="container">
<img src="http://placehold.it/30x50" />
</div>
<div class="container">
<img src="http://placehold.it/50x30" />
</div>
<div class="container">
<img src="http://placehold.it/500x300" />
</div>
<div class="container">
<img src="http://placehold.it/300x500" />
</div>
I have a question that I suspect has a simple answer. I'm using Bootstrap to make a personal webpage, and I'm attempting to divide the background into 3 equal columns (which will all have different images).
I know this could be done with class="col-xs-4" but the issue is that I'd like to keep what's over the background as-is (it's a "col-lg-12" that is responsive).
Is there a way to split my background (again, going to upload images into the 3 panels, and the panels will essentially mask the full images), and still have all the "col-lg-12" heading stuff on top?
Thanks for any help you can give, my current html code is such:
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img class="img-responsive" src="img/picture.png" alt="">
<div class="intro-text">
<span class="intohead">Filler Text</span>
<span class="subhead">More detailed, longer filler text for below</span>
</div>
</div>
</div>
</div>
</header>
Basically, there are three columns with background images, and then a cover div that is placed on top of the three columns. You can place anything you like in the cover div. Here's an article about CSS positioning.
.wrap {
width: 100%;
height: 300px;
position:relative;
}
.section {
float: left;
height: 300px;
width: 33.33333%;
}
.one {
background: url(http://placehold.it/200x300/ccc/666/&text=img+1) no-repeat;
background-size: 100%;
}
.two {
background: url(http://placehold.it/200x300/666/ccc/&text=img+2) no-repeat;
background-size: 100%;
}
.three {
background: url(http://placehold.it/200x300/ccc/666/&text=img+3) no-repeat;
background-size: 100%;
}
.cover {
width: 100%;
height: 100%;
/*A background isn't needed, it's just to show that the element is there*/
background: salmon;
opacity: .5;
/* this stuff is key */
position: absolute;
top: 0;
left: 0;
/* place cover on top */
z-index: 10;
}
<div class="wrap">
<div class="cover">Put all you content in here</div>
<div class="section one"></div>
<div class="section two"></div>
<div class="section three"></div>
</div>
Run the code snippet and tell me what happens. Is this what you're looking for?