The main structure I'm using is:
<div class="portfolio-thumbs">
<div class="col-md-4 thumb-item">
<a href="#">
<div class="thumb-img">
<img src="./img/portfolio/rocksea.jpg" class="img-responsive" />
<div class="thumb-overlay"></div>
</div>
</a>
</div>
...
</div>
I've created a full JS Fiddle here
I'm looking to add a semi-transparent overlay to the image (will later be adding transition and some content to slide in from bottom of each image), yet can't seem to get it to appear.
Have compared to couple of other articles on SO but none seemed to fit the bill.
I've done this a thousand times before, any idea what's going wrong with this?
With help of #ZachSaucier , adding 100% height to all elements in tree. Also adding:
div.latest-work div.portfolio-thumbs div.thumb-item a div.thumb-img div.thumb-overlay {
position: absolute;
top: 0;
}
Made the overlay sit on top of the img.
Updated fiddle here
Related
I have created a Bootstrap carousel, and I am using custom css to define a background image for each of the three slides. For some reason, the background image is not appearing on the first slide, although the background images for slides 2 and 3 are appearing ok. I can't work out what is wrong. I think it may be something to do with the active class being applied just to the first slide?? Here is the HTML and CSS for the first slide, the carousel is called myCarousel, thanks:
HTML:
<!-- class item means item in carousel -->
<div id="slide1" class="item active">
<!--
<img src="http://placehold.it/1200x500">
-->
<h1>HELLO THERE</h1>
<div class="carousel-caption">
<h4>High Quality Domain Names</h4>
<p>Domains that can help your business marketing</p>
</div> <!-- close carousel-caption -->
</div> <!-- close slide1 -->
CSS:
#myCarousel .item { height: 400px; }
<!-- top left is the background position of the image, no repeat because we don't want the background image repeating -->
#slide1 {
background: url('images/carousel_medium_01.jpg') top center no- repeat;
}
Instead of putting your code directly on the <div class="item"> I suggest to make a nested div (replacing the image) and apply a height, width and background-image properties there instead. Like this:
HTML
<div class="carousel-inner" role="listbox">
<div class="item">
<div class="item-custom first"></div>
</div>
<div class="item">
<div class="item-custom second"></div>
</div>
<div class="item active">
<div class="item-custom third"></div>
</div>
</div>
CSS
.item-custom {
height: 100%;
width: 100%;
}
Then for your .first, .second, and .third classes you can add the background-images you want. That should get you going in the right direction. Hope that helps.
The code above is loading the placeholder background image, but it is only visible behind the h1 element due to the lack of the parent #myCarousel div.
The CSS is looking for the parent div on which to apply the explicit height and width.
Try adding the parent div:
<!-- class item means item in carousel -->
<div id="myCarousel">
<div id="slide1" class="item active">
<!--<img src="http://placehold.it/1200x500">-->
<h1>HELLO THERE</h1>
<div class="carousel-caption">
<h4>High Quality Domain Names</h4>
<p>Domains that can help your business marketing</p>
</div> <!-- close carousel-caption -->
</div> <!-- close slide1 -->
</div>
This allows your height/width properties to be applied, and for the background image to display.
Along with crazymatt's suggestion to organize the nested elements a bit more, you can use the background-size and background-position rules to display the image as needed for each individual slide.
jsfiddle example
I have found the solution by ammending the media queries that the site was using. What I had to do was make sure that I had an explicit media query rule to cover all potential screen widths. In the media queries, I specified the background images for the carousel slides. By doing this, I found I always had the background images correctly populated. Previously, for a certain range of screen sizes, I was just letting default CSS define the background images, and this meant the background image for the first slide didn't show. I guess adding media queries for all possible screen sizes meant there was always a "trigger" to populate the background images.
Thanks also to those who offered a reply.
I am working on responsive web. I have an image that have content in front of that image. But, when I zoom out or zoom in to the max width, I found that the content ( in this case is text ) did not place on its first spot.
Do you have any idea how to make a web more responsive ? I mean responsive in here is whether we zoom in or zoom out, the position will be the same but the size maybe change.
Any idea will be appreciated. Big Thanks!
*I already am using bootstrap
Here the example of the code:
<div class="image-one">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg" style="padding:5px"/>
<h2 style="vertical-align:middle;margin-left:150px;margin-top:-150px;position:absolute;color:#ff0000">Kuta</h2>
</div>
Not sure I have a clue what you're asking, but take a look at this for a more responsive structure:
<div class="image-one" style="position: relative;display: inline-block;">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg" style=" max-width:100%; ">
<h2 style="vertical-align:middle;left: 31.5%;top: 50%;position:absolute;color:#ff0000;">Kuta</h2>
</div>
Not quite sure what´s your issue exactly. You want the text and/or the image rezie? Maybe this will help you:
<div class="image-one" style="background-image:url('http://sachinchoolur.github.io/lightslider/img/cS-1.jpg');background-size: contain;background-repeat: no-repeat; position: relative;width: 100%;height: 100%;">
<div class="centered_text" style="position: absolute;top: 50%; left: 50%;transform: translate(-50%,-50%);">
<h2 style="color:#ff0000">Kuta</h2>
</div>
</div>
I think it'll be best for anyone wanting to help to check my website and see the issue for him or herself. (iPad required..)
www.....net
As you see, I have 2 sections, one top section and one lower section, both have height 100%.
The lowest section has 4 div's with different shades of blue as background-color. Now..
on the iPad (and only in safari,) I get this issue where the background-color of the lowest section div's of my website get totally messed up or collapses when I change from portrait to landscape or in reverse.
My guess is that because safari has this new feature (as of ios 8) where when you scroll down the tabs section disappears, this in fact makes the viewport or height of the website really higher than the 100% that was previously sufficient, that is, before it disappeared, now if you make the tab come back when you're all the way down my page (by tapping it,) you'll see that this is true..
Is there some way to fix this?
If you need code here please ask but I think it'll be best for you to check it out yourself first.. because I have no idea where to start..
EDIT:
(by the way.. strange enough this does not happen on my iphone 6..)
Bowser.
<div id="bl-main" class="bl-main">
<section>
<a href="http://www.blog.elliotwagner.net">
<div class="bl-box">
<h2 class="bl-icon bl-icon-about">Blog</h2>
</div>
</a>
</section>
<section id="bl-work-section">
<a href="about.html">
<div class="bl-box">
<h2 class="bl-icon bl-icon-works">Résumé</h2>
</div>
</a>
</section>
<!-- For this section you need to set the top to be 50% not -50% -->
.bl-main > section:nth-child(3) {
top: 50%;
left: 0;
background: #5071B8;
}
<section>
<a href="books.html">
<div class="bl-box">
<h2 class="bl-icon bl-icon-blog">Books</h2>
</div>
</a>
</section>
<section>
<a href="about.html">
<div class="bl-box">
<h2 class="bl-icon bl-icon-contact">About</h2>
</div>
</a>
</section>
<div style="clear: both;"> </div>
</div>
I have been searching for answers everywhere and can't find one that fits my needs. So I created a Fiddle to explain what I want to achieve: http://jsfiddle.net/Fran6/jbo5pfs4/3/
HTML:
<div class="col1">
<img></img>
<h1>Title 1</h1>
</div>
<div class="col2">
<div class="box1"><img></img>
<h1>Title 2</h1>
</div>
<div class="box2"><img></img>
<h1>Title 3</h1>
</div>
<div class="box3"><img></img>
<h1>Title 4</h1>
</div>
</div>
I have containers positioned on the page. They have images and I would like to have them not stretched. I actually would like the same effect than for background-image: cover. That is my first question.
Then, I would like to have a zoom effect on the image when I hover it, via the link that is implemented with the title.
I can achieve these things separately but not together. Also, I started by using background images instead of in HTML but could not do the zoom effect.
So if anyone could help me solve my problem, that would be very nice !! :-)
Thanks !
I can complete the background-image: cover. Create a html tag with a id of 'cover' like so...
<div id="cover">
<!-- content -->
</div>
Then, you need to do the following in CSS.
#cover {
padding: 0, 0, 0, 0;
background: url(http://placehold.it/300x150) top left no-repeat;
background-size: cover;
height: 300px;
}
I would imagine to do the zoom effect, you could possibly use :hover although I'm not 100% sure.
Hope this helps though.
I have an HTML "toolbar" containing a number of widgets arranged horizontally. Each item is represented by a div in the source document:
<div id="widget1" />
<div id="widget2" />
<div id="widget3" />
I position the divs using float: left. The problem is that I also want them to be pinned to the top of the toolbar so that they don't wrap around if the user reduces the width of the window. Instead, I just want them to overflow horizontally (with the overflow hidden) so that the behavior is like that of a real toolbar.
In other words, I want something like position: fixed but only for the vertical coordinate. Horizontally they should be positioned one after another in a row. Is there any way to do this with CSS?
Update Here's the real HTML I'm using. The divss with class="row" are the ones that should appear as widgets in the toolbar, arranged horizontally in a single row.
<div class="row" id="titleRow">
<span class="item"> <img src="../images/logo.png" height="26" /> </span>
<span class="item" id="title">Title</span>
<span class="item" id="close" onclick="window.close();"> close </span>
</div>
<div class="row" id="menuRow">
<span class="item"> <ul id="menu"></ul> </span>
</div>
<div class="row" id="searchRow">
</div>
<div class="row" id="pageRow">
<span class="item" id="page-related-data"> Page-related data: </span>
</div>
Rather than float: left; try display: inline-block; vertical-align: top;. Then set white-space: nowrap; and overflow: hidden; on the parent element. See http://jsfiddle.net/rt9sS/1/ for an example.
Note inline-block has some issues. It's white space aware (so white space around elements in the HTML will be visible in the document). It also has limited support in IE6/7, although you can work around that by giving the element layout, e.g. .oldie .widget { display:inline; zoom:1; }. See http://www.quirksmode.org/css/display.html#inlineblock for more.
I know this is an old question, wanted to add a simple jquery answer for those that run across it.
$(window).scroll(function(){
$("#keep-in-place").css("top",$(document).scrollTop()+"px");
});
To make higher or lower on page simply add to $(document).scrollTop()
Works for me