CSS: Text overlay on images while hover - javascript

I've read several tutorials and forums include this and other sources on how to create an hover state description overlay over images. I have also successfully created a version of it. However there is one problem: its not responsive (or it breaks gracefully).
<div class="section">
<ul>
<li>
<div>
<p><b>1 unit Mathematics extension</b></p>
<img src="img/thumbnail.png" alt="Thumbnail">
<p id="overlay">Placerat massa ut est, in, .</p>
</div>
</li>
</ul>
</div>
Note*: the reason why i have it in a list is that on desktop and tablet view i want 3 images to appear across the page.
my relevant CSS is:
.section ul{
list-style-type: none;
width: 100%;
margin: 0;
padding: 0;
}
.section li{
width: 100%;
padding-bottom: 30px;
}
.section img{
width:90%;
}
#overlay{
width: 90%;
position: relative;
left: 5%;
bottom: 127px;
color: white;
background: rgba(0, 0, 0, 0.7);
}
My problem is the #overlay css, Im trying to align the bottom of the overlay to the bottom edge of the image. however when i do a percentage e.g. bottom: x% it does not work, which forces me to use a fixed px. However when i do this, based on the width of the window the height of the overlay changes and sometimes it results in the bottom edge of the overlay not aligned with the bottom of the edge.
Is there are way to work around this using css and html only?
if anyone is able to provide some input that would be much appreciated it!
Thank you all in advanced.

use z-index for #overlay
#overlay{
width: 90%;
position: relative;
bottom: 50px;
color: white;
background: rgba(0, 0, 0, 0.7);
z-index:1;
}
DEMO
check the demo and expand and collapse the result window to know the reponsiveness

Sometime jQuery is very easy help us incompare of tricky CSS
check this jsFiddle
jQuery (library 1.7.2)
jQuery(document).ready(function(){
$("img").mouseover(function(){
$("#overlay").css("z-index","9999");
});
$("img").mouseout(function(){
$("#overlay").css("z-index","-1");
});
});

Related

How to fix a Lightbox gallery overlaying the site's header?

I'm making a website with a Lightbox image gallery on it. Everything with the gallery and the layout of the page work works perfectly except for one thing.
In desktop view, it's working, but when I try to open it on a phone (or reduce the width of my browser window to the minimum) the lightbox gallery overlays the header menu of the site.
I will provide the HTML and CSS I made to put the header and in their place.
I tried using position fixed absolute and realitive on the header but it didn't work. I have no idea how to fix this to be honest.
The HTML of the header:
<header>
<ul>
<li>Home</li>
<li>Shiatsu</li></strong>
<li>Terapia Holística</li>
<li>Terapia com Cristais</li>
<li>Pantaloterapia</li>
</ul>
</header>
The HTML of the gallery:
<div class="gallery">
<img src="images/holistica/1.jpeg">
<img src="images/holistica/2.jpeg">
</div>
The CSS of the header:
header {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
top: 0;
left: 0;
height: 100px;
width: 100%;
background: #f9f3ff;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.4);
}
The CSS of the gallery:
.gallery img {
width: 100%;
max-width: 230px;
height: 230px;
margin: 10px 10px 0 0;
filter: grayscale(100%);
transition: 1s;
}
.gallery img:hover {
filter: grayscale(0);
transform: scale(1.1);
}
I didn't modify the javascript of the lightbox the code is very long, you can see it here: https://lokeshdhakar.com/projects/lightbox2/
I used the lightbox-plus-jquery.min.js.
How can I make so that when the user scrolls down in mobile view, the header overlays the image gallery?
It seems a problem of z-index. Looking at the CSS styles of lightbox (.lightboxOverlay with z-index: 9999 and .lightbox with z-index: 10000), it would be enough to add a z-index: 10001 or more to the .header styles.

Dynamic placeholder height

So I have a list with a position: fixed button in the bottom of the viewport. Because this button is position: fixed the last element of the list and part of the second last appear beneath the button, so the user can't see them properly.
What I tried so far:
adding a padding-bottom to the container with the height of the button. Issue with this approach: in different languages the height of the button is different, so it's good in only a couple of scenarios.
making the button position: sticky instead of fixed. Issue with this approach: the list is in a overflow-y: scroll container, so this approach does not work in iOS. Again, only good in a couple of scenarios.
adding a div after the list and controlling its height with javascript. Issue with this approach: does the job, but it's not very elegant.
Does anyone know of a better approach other than my third one? When I started with this I thought I might have to use JS for it, but position: sticky gave me hope that it would be possible with only CSS.
Since your list is fixed, this is an example of what I do for buttons on the bottom of my screen. Although it would be nice if you showed an example of your problem, cause it's hard to tell.
Obviously, you'll have to edit the text's positioning if you wanted, but the principle is what matters, and everything is responsive. Each individual <li> element is 10% high and 20% wide no matter the size of the screen.
CSS:
<style>
ul { position: fixed; width: 100%; height: 10%; bottom: 0%; left: 0%; background-color: deepskyblue; list-style-type: none; margin: 0; }
li { position: absolute; }
.a { width: 20%; height: 100%; background-color: red; left: 0%; }
.b { width: 20%; height: 100%; background-color: orange; left: 20%; }
.c { width: 20%; height: 100%; background-color: yellow; left: 40%; }
</style>
HTML:
<ul>
<li class="a">AAA</li>
<li class="b">BBB</li>
<li class="c">CCC</li>
</ul>

adjusting Pop up window position based on page scroll position and closing by clicking out.

So I know there are plenty of feeds about these issues and I've been through most of them yet I can't make it work. I get really lost with .js.
So I'm using very simple pop up windows that provide more contents on a topic by cicking on the title of the topic. I'm using a simple css code:
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
left: 20%;
top:25%;
width: 70%;
height: auto;
padding: 10px;
border: 6px solid #ed7d86;
background-color: white;
text-align: center;
z-index: 1002;
overflow: auto;
}
And html:
<div class="flex-item">
<a href="javascript:void(0)" onclick="document.getElementById('TITLE').style.display='block';
document.getElementById('fade').style.display='block'">TITLE</a>
<div id="TITLE" class="white_content">Something else about TITLE.
<a href="javascript:void(0)" onclick="document.getElementById('TITLE').style.display='none';
document.getElementById('fade').style.display='none'">Close</a></div>
</div>
This code works great until I try it on elements that are lower on the page in which case the box obviously continue showing at the set top and left position, which means that I have to scroll back up to see it. If I get rid of top and left conditions, I just end up with the box showing up randomly at some corner of the page.
I also want people to be able to leave the box just by clicking on the black_overlay area. Can anyone recommend a fix that would work with my code?
Ah well, not much success with my question. Wanted to let you know that I changed the position of the .white_content to fixed and it solved my problem for positioning. I'm still working on closing the window by clicking outside the box without changing all my code.

align texts or images in Bootstrap carousel

I use Bootstrap 3.3.4 and I want to know which way is better to align texts or items in carousel.
here is a exemple from a slider. How can I align text like this and stay at any screen resolution at the same place. I use top: x, right: x but every time when I resize the window, text climb above and not stay at middle anymore.
CSS for align
.carousel-caption {
position: absolute;
right: 15%;
bottom: 40%;
left: 15%;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
Just basic bootstrap slider. But If I use bottom 40% for exemple to rise text at middle of the page works. But if I use smaller displays the text rise and stay almost on top.
In this exemple text stay fixed on every device.
<div class="wrap">
<div class="display-table">
<div class="display-cell">
<h1>Title in here</h1>
</div>
</div>
</div>
<style>
.wrap {
width: 100%;
height: 400px;
}
.display-table {
width: 100%;
height: 100%;
display: table;
}
.display-cell {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
</style>
This allows fixed vertical alignment and should work cross browser. Just note the fixed height applied to .wrap must be present for the children to inherit 100% height!
Hope this helps :)
Hope, Try this demo that centers text vertically in the Bootstrap carousel.
Here is the Fiddle.
All I do here is give the div a height that contains the text and then position it with this css...
.vcenter {
position: absolute;
height:100px;
width:100%;
top:50%;
bottom:50%;
margin-top: -50px;
margin-bottom: -50px;
}

jcarousel width issue

I'm using jCarousel on a website I'm creating for my company. I'm using the default javascript that came with jCarousel.
<ul id="mycarousel" class="jcarousel-list jcarousel-list-horizontal" style="overflow: hidden; position: relative; top: 0px; margin: 0px; padding: 0px; left: 0px;width: 2084px;">
The width is being generated by the javascript that jCarousel came with but I can cypher though it to figure out where to change the value.
Any help would be great.
Here is a link to what I'm working on: http://marcbrigham.com/lynxems/index.html
.jcarousel-skin-tango .jcarousel-clip-horizontal {
width: 245px;
height: 75px;
}
Taken from the default Tango skin that´s used in the examples.
What skin/theme/CSS are you using? jCarousel needs to change the width to enable the slide but the wrapper element should be using overflow: hidden;.
UPDATE
This CSS edit makes it look OK but if you need it to cover the whole width of #mainhome you should consider changing the size of the images.
.jcarousel-skin-tango .jcarousel-container-horizontal {
width: 765px;
padding: 20px 40px;
height: 200px;
}
.jcarousel-skin-tango .jcarousel-clip-horizontal {
width: 775px;
height: 190px;
}
Another option could be adding margin: 0 40px; to .jcarousel-skin-tango .jcarousel-clip-horizontal.
You can also create a CSS style and add !important to it, which will override the inline styles. For example:
#carousel {
width: 1000px !important;
}
While this works, I'm finding that if the container is too wide, you'll be able to scroll beyond just the items within it. I'm still looking for a workaround for this.
There's also a new version (0.3.0) but there aren't any really good examples on the developers site yet.
just add a style to your css:
.jcarousel-list-horizontal {width: x}
Al

Categories