Image and Div overlay, not quite working - html

This should be a quick question i think. I am trying to create a simple overlay over a div using hover. This half works, because the image does not get covered.
<div class="puzzlePieceContainer">
<img class="back-link puzzleTileBack-4" style="display: none; margin-left: 0px;" alt="" />
<div class="boxShadow arrowMargin">
<div class="overlayContainer overlayBox">
<div id="puzzleTile-4" class="puzzleTiles">
<img src="http://debtsettlementlogic.com/wp-content/uploads/2013/09/debt-solutions-florida.jpg" alt="" width="300" height="199" />
<h2 style="padding-top: 10px;">Solutions</h2>
</div>
</div>
</div>
</div>
CSS:
.overlayBox:hover
{
background:rgba(0,0,0,.15);
}
Here is my fiddle: http://jsfiddle.net/3aRY4/
How do I get the effect that the overlay covers the entire div, and not just everything around the picture?

One approach would be to add the overlay via a pseudo element. Just absolutely position the pseudo element relative to the parent and have it cover the entire element.
Updated Example
.overlayBox {
position:relative;
}
.overlayBox:hover:after {
content:'';
position:absolute;
background:rgba(0, 0, 0, .15);
top:0; bottom:0;
left:0; right:0;
}

Related

Align div left and right

In the codes below, I have two <div> tags. I want to align one <div> to the left and the other to the right, with the same height and width. Please help me to do this.
<div id="imgShow">
<panel>
<img class = "hidden" id="orginal" alt = "Goofy pic of me" runat="server" />
<div id="ScrollImg" style="position:relative;width:900px; height:330px;overflow: scroll; top: 3px; left: -1px;left:auto">
<canvas id = "drawing" height="1500" width="1200" >
<p>Canvas not supported</p>
</canvas>
</div>
</panel>
</div>
<div id="divComplete" style="position:relative;width:100px; height:330px;overflow: scroll; top: 3px; right: -1px;right:auto"></div>
Set the floats for each div with CSS: example
.left { width:50%; float:left; height:200px; background:red;}
.right { width:50%; float: right; height:200px; background: blue;}
Try below code:
Demo
<div id="imgShow" style="width:50%; height:330px;overflow: scroll;float:left;">
<panel>
<img class = "hidden" id="orginal" alt = "Goofy pic of me" runat="server" />
<div id="ScrollImg">
<canvas id = "drawing" height="1500" width="1200" >
<p>Canvas not supported</p>
</canvas>
</div>
</panel>
</div>
<div id="divComplete" style="width:50%; height:330px;overflow: scroll;">Canvas not supported</div>
You should use floats:
<style>
#imgShow, #divComplete{
float:left;
width:50%;
}
</style>
If you want both at different widths, simply separate the css selectors and add the desired width.
PS: Avoid using inline CSS unless you need to, transfer these to a separate CSS file and include it in the head section
You can use twitter bootstrap css for styling your divs. Simply addclass="col-xs-6" to each div. Remember class="col-xs-12" is the full width that the div can take based on the width of the parent container. Using -xs- instead of -md- shrinks the div upon resize instead of knocking them down. If you want margins simply add change them to col-xs-5s then add a col-xs-2 div in between. It's also good practice to use parent divs with container-fluid and row classes

Bootstrap 3 vertical align image in thumbnail

I am trying to vertical align an image within a bootstrap thumbnail. Thanks for any help!
<div class="pull-left" style="margin-right: 10px;">
<div class="thumbnail">
<div class="caption" style="background-color: #ccc;">
<a style="color: black;" href="/product/?id=#product.Id">#product.UPC12</a>
</div>
<div style="width: 150px; height: 150px; "> <!-- Center this -->
<a style="" href="#" onclick="showProduct('#product.Id')">
<img class="" src="~/Asset.ashx?id=1253&type=small" />
</a>
</div>
<div style="padding-left: 5px;" class="checkbox">
<label>
#Html.Partial("~/Views/Shared/_ProductImageCheckboxPartial.cshtml", new Logix3.TDC.Exchange.Web.Models.ProductImageModel() { Product = product, Image = defaultImage })
</label>
</div>
</div>
</div>
I assume you wanted to achieve something like this, using different-sized images?
I've looked and looked for a simple answer to this and nothing ever seemed to work well, so I managed to take a few bits and hack something together.
It's a little convoluted but it works really well for me, and also resizes and centers both landscape and portrait images. It also lets me set the dimension ratios I want the image to be (adjust the padding-top percentage in ".thumb:before").
Bootply Example at 1/1 ratio (square). (click on the image to see the original)
Bootply Example at slight portrait ratio (125%)
This needs two custom css classes.
The 'thumb' class is assigned to the div and the image url is set as a background.
Since it's poor form to embed a div inside an anchor tag, I also created a 'clickable' class, which takes the inside anchor tag, sizes it to the parent container, and floats it above the parent so that it mimics clicking the image.
HTML:
<div class="col-xs-1">
<div class="clickable thumb" style="background-image: url('http://auduno.github.io/clmtrackr/media/audrey.jpg')">
<a href="http://auduno.github.io/clmtrackr/media/audrey.jpg">
</a>
</div>
<div class="text-center"><small>Product 15</small></div>
</div>
CSS:
.thumb{
background-position: 50% 50%;
background-repeat: no-repeat;
background-size:cover;
position:relative;
width:100%;
border:1px solid #BBB;
}
.thumb:before {
content: "";
display: block;
padding-top: 100%;
}
.clickable > a{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
text-decoration:none; /* Makes sure the link doesn't get underlined */
z-index:10; /* raises anchor tag above everything else in div */
/* For IE */
background-color:white; /*workaround to make clickable in IE */
opacity: 0; /*workaround to make clickable in IE */
filter: alpha(opacity=1); /*workaround to make clickable in IE */
//from http://blog.avtex.com/2012/01/27/how-to-make-an-entire-div-clickable-with-css/
}

Hyperlink not responding

My landing page has a slideshow with text and links that direct the visitor to it's corresponding page.
Landing page link: http://karenrubkiewicz.com/martin/
The yellow arrow in the second box should be a clickable link, but it doesn't respond.
Here is my coding:
HTML
<div id="maximage">
<div>
<img src="images/00_landing page/backgrounds/background_01.jpg" alt="" width="1400" height="1050" />
<div class="in-slide-content">
PLACES
</div>
<a class="in-slide-content2" href="places.html"><img src="images/arrow.png" height="20px"></a>
</div>
<div>
<img src="images/00_landing page/backgrounds/background_02.jpg" alt="" width="1400" height="1050" />
<div class="in-slide-content">
PLACES
</div>
<a class="in-slide-content2" href="places.html"><img src="images/arrow.png" height="20px"></a>
</div>
ETC...
</div> <!--END MAXIMAGE DIV-->
CSS
#maximage {
/* position:fixed !important;*/
display:block;
}
.in-slide-content {
font-family: 'Oswald', sans-serif;
font-size:16pt;
letter-spacing:1px;
position: absolute;
right:63px;
bottom:240px;
width: 220px;
background: rgba(0,0,0,0.8);
color:#FFF;
text-align:center;
text-decoration:none;
padding-top:23px;
padding-bottom:23px;
-webkit-font-smoothing:antialiased;
}
.in-slide-content2{
position: absolute;
right:63px;
bottom:162px;
width: 220px;
background: rgba(0,0,0,0.8);
text-align:center;
padding-top:25px;
padding-bottom:25px;
-webkit-font-smoothing:antialiased;
}
.in-slide-content2 a{
position: relative;
display:block;
}
I am using a maximage plugin, I am not sure whether that could be a possible cause of inference.
One more note, in my HTML, when I remove a certain div, the link begins to work, only then my slideshow falls apart.
EXAMPLE
<div id="maximage">
<div> <----REMOVE THIS DIV
<img src="images/00_landing page/backgrounds/background_01.jpg" alt="" width="1400" height="1050" />
<div class="in-slide-content">
PLACES
</div>
<a class="in-slide-content2" href="places.html"><img src="images/arrow.png" height="20px"></a>
</div> <-----AND REMOVE THIS DIV
ETC...
</div> <!--END MAXIMAGE DIV-->
I'm really stuck on this one.
Thanks in advance!
Place this in CSS:
#nav {
z-index: 2;
}
body .mc-cycle {
z-index: 0;
}
If it wont help, then this:
#nav {
z-index: 2 !important;
}
body .mc-cycle {
z-index: 0 !important;
}
Looking at your codes on your site, (which btw look different from what you posted here), I think things get complicated when your in-slide-content and in-slide-content2 divs are enclosed in your mc-image with its background set to your image file (instead of using an img tag).
This is what your current codes look like:
<div class="mc-image " ... background-image: url(http://karenrubkiewicz.com/martin/images/00_landing%20page/backgrounds/background_01.jpg);" data-href="">
<div class="in-slide-content">PLACES</div>
<a class="in-slide-content2" href="places.html"><img src="images/arrow.png" height="20px"></a>
</div>
Try convert your mc-image to an image tag and extract your in-slide-content and in-slide-content2 out of your maximage.
I think this live demo on jsfiddle is very similar to what you are trying to do.
The reason why manipulating the z-index attribute (of the image, the anchor tag etc.) in your css script probably won't work is because the jquery.cycle.all.js script assigns all your images with some high value z-index on start-up so that they can stack on top of each other.
// line 295 - 303
// set position and zIndex on all the slides
$slides.css({position: 'absolute', top:0, left:0}).hide().each(function(i) {
var z;
if (opts.backwards)
z = first ? i <= first ? els.length + (i-first) : first-i : els.length-i;
else
z = first ? i >= first ? els.length - (i-first) : first-i : els.length-i;
$(this).css('z-index', z)
});
As the script cycles through your images, some codes (I haven't figured out where yet) will reset the z-index of that image to z+1, so that current image will be stack on top of the rest. I tried setting the z-index of some of your HTML elements to some ridiculous high number but to no avail. Anyway, I still think the cleanest way to solve this is to look at the fiddle I shared.

Write something over an image html

How I write a text into a photo?
<img src"photo.png" />TEXT
I have to do with css position absolute and relative? I know it works with position absolute and relative but it is another way to do and how is the best way? If is the only way with position absolute and relative, position relative must be the main photo and position absolute the content(TEXT) ?
you can do like this
<img src="http://upload.wikimedia.org/wikipedia/commons/5/5a/SMirC-hi.svg" /><div style="position:relative; left:120px;top:-150px">TEXT</div>
for demo
http://jsfiddle.net/5CSej/
try something like this,but this is with absolute and relative
<tr>
<div class="image">
<img alt="" src="http://www.YourDomain.com/img/yourImage.jpg" />
<div class="text">
<p>This is some demonstration text</p>
<p>This is some more wonderful text</p>
</div>
</div>
</tr>
ur css
.image {
position:relative;
}
.image .text {
position:absolute;
top:10px;
left:10px;
width:300px;
}
This will place text directly on an image
okay, here is another method to add a text over the image..the condition is you have to use a background image. Here is the Demo.
div:before{
content: "";
position:absolute;
background:url('http://lorempixel.com/400/400') no-repeat;
width:400px; height:400px;
z-index:-1;
}
<div><h1>Look at ME!</h1></div>

Show hidden element on <img> tag

I have an image in my HTML code:
<img src="main.jpg" />
I want to show a smaller linkable image over main.jpg when I hold mouse over main.jpg.
(This image is link)
I prefer to use smaller image by CSS.
I tried this:
<div class="img"><img src="main.jpg" /></div>
<div class="resize">resize imgae</div>
.resize{
background:url(resize.jpg) left top no-repeat;
position:absolute;
top:0;
left:0;
desiplay:none;
text-indent: -9999px;
}
I want do this just with pure CSS (no JS)...Do you know a trick or an alternative way to do it?
this will solve your problem
<div class="img">
<img src="main.jpg" />
<div class="resize">resize imgae</div>
</div>
Also correct your css class
change desiplay:none; to display:none;