full image caption for images with dynamic size - javascript

I have this code:
HTML
<div id="wrapper">
<div class="box">
<img src="http://tukaki.pawlusmall.com/images/image1.png"/>
<span class="caption">
<p>caption</p>
</span>
</div>
<div class="box">
<img src="http://tukaki.pawlusmall.com/images/image2.png"/>
<span class="caption">
<p>caption</p>
</span>
</div>
<div class="box">
<img src="http://tukaki.pawlusmall.com/images/image3.png"/>
<span class="caption">
<p>caption</p>
</span>
</div>
</div>
CSS
.box {
position: relative;
width: 30%;
height: auto;
display: inline-block;
}
.box img {
height: auto;
width: 100%;
position: absolute;
left: 0;
}
.box span {
position: absolute;
width: 100%;
height: auto;
color: #FFF;
left: 0;
background-color: #FF0000;
}
You can find it here:
http://jsfiddle.net/v2Vk3/3/
Just want the caption to be the same height and width as the image, overlaping it and without changing the automatic resizing for images.
Is there any way to get this working with CSS?
Thx

I guess you have asked for this http://jsfiddle.net/6hgCj/
.box {
position: relative;
width: 30%;
height: auto;
display: inline-block;
}
.box img {
height: auto;
width: 100%;
}
.box span {
position: absolute;
width: 100%;
height: 100%;
color: #FFF;
left: 0;
top:0;
background-color: #FF0000;
}

Related

CSS: Adding Hover Overlay causes div to appear at the top of the screen as well

I'm working with a CSS Overlay for an image, trying to get text to display when the image is hovered. I have it working, but for some reason, the text is also all appearing as a blob above the gallery. I think it's to do with the position tag I'm using, but I'm not sure how to reproduce exactly. Code below + CSB:
https://codesandbox.io/s/eager-moore-qeki7
gallery
{
data.map((edge) => (
<div key={edge} className={styles.imgHov}>
<Img
fluid={edge.node.data.one}
className={styles.image}
/>
<div className={styles.overlay} key={edge}>
<p className={styles.text}>{edge.node.data.item_one}</p>
<p className={styles.text}>{edge.node.data.item_two}</p>
</div>
</div>
))
}
css
.imgHov:hover{
position: relative;
}
.image{
width: 25vw;
height: 25vw;
object-fit: cover;
}
.overlay{
position: absolute;
z-index: 999;
margin: 0 0;
left: 0;
right: 0;
top: 40%;
width: 60%;
background-color: pink;
height: 60%;
width: 25vw;
}
.overlay .text{
color: white;
font-family: Geomanist;
}
I translated your app in normal HTML, i think this should meet your requirements :)
.imgHov{
position: relative;
width: 25vw;
height: 25vw;
}
.image{
width: 100%;
height: 100%;
object-fit: cover;
}
.overlay{
display: none;
position: absolute;
z-index: 999;
margin: 0 0;
left: 0;
right: 0;
top: 40%;
width: 60%;
background-color: pink;
height: 60%;
width: 25vw;
}
.overlay .text{
color: white;
font-family: Geomanist;
}
.imgHov:hover .overlay {
display: block;
}
<div class="imgHov">
<img class="image" src="https://static.scientificamerican.com/sciam/cache/file/92E141F8-36E4-4331-BB2EE42AC8674DD3_source.jpg"/>
<div class="overlay">
<p class="text">item one</p>
<p class="text">item two</p>
</div>
</div>

apply same jquery function to element present inside parent div

code jsFiddle
I applied jquery's click function to 'li#info' element. But when I click, it perform jquery to element of different parent also ('#theme div#info-overlay').
I want, whenever 'li#info' is clicked on the parent element('#theme') then it perform function to its child element only(div#info-overlay).
Like in the code, by clicking on 'Fe' it open overlay on both the block. But i want it to show overlay only to the block for which 'Fe'is clicked.
sorry, I am new in jquery.
I got your point. you just need to change one line of code
because both divs have same ids thats why both are appearing on click
and it's not a good practice to use same id multiple time on a single file.
it will make issue somewhere sometime.
i have change this line
$("div#info-overlay").toggle('100');
into this
$(this).parents('#theme').find("#info-overlay").toggle('100');
check this
JS Fiddle
use this to find div $(this).parents('#theme').find("#info overlay").toggle('100');
$(document).ready(function(){
$("div#theme").hover(function(){
$(".theme .header *").show();
$(".theme .header .overlay").hide();
},function(){
$(".theme .header *").hide();
});
$("li#info").click(function(){
$(".theme .header .overlay").hide();
$(this).parents('#theme').find("#info-overlay").toggle('100');
// $("div#info-overlay").toggle('100');
});
});
/*
theme block
*/
.theme{
width: 100%;
height: 250px;
background-color: #fff;
margin: 20px auto;
}
.theme .header{
width: 100%;
height: 200px;
position: relative;
background-color: #eee;
}
.theme .header *{
display: none;
}
.theme .header .overlay{
position: absolute;
background-color: #fff;
left: 60px;
top: 10px;
width: 83%;
height: 180px;
z-index: 80;
}
.theme .header .about{
position: absolute;
left: 10px;
top: 10px;
}
.theme .header .about li{
display: block;
height: 40px;
width: 40px;
border-radius: 50%;
background-color: #FED200;
opacity: .5;
color: #fff;
padding: 5px 10px;
margin: 5px 0;
}
.theme .footer{
width: 100%;
height: 50px;
padding: 0 20px;
}
.theme .footer .left{
width: 85%;
display: inline-block;
overflow-y:hidden;
height: 50px;
float: left;
padding: 10px 0;
}
#media screen and (min-width:620px) {
.theme{
width: 70%;
}
}
#media screen and (min-width:720px) {
.theme{
width: 49%;
display: inline-block;
}
}
#media screen and (min-width:920px) {
body .container.theme-holder {
width: 70%;
}
}
#media screen and (min-width:1024px) {
body .container.theme-holder {
width: 95%;
}
.theme{
width: 32%;
}
}
#media screen and (min-width:1200px) {
body .container.theme-holder {
width: 85%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="theme" class="theme">
<div class="header">
<div class="about">
<li id="info">Fe</li>
</div>
<div id="info-overlay" class="overlay">
info
</div>
</div>
<div class="footer">
<div class="left">
<div class="name">
<p>Corporate sdfsfdsfdsfsd</p>
</div>
</div>
</div>
</div>
<div id="theme" class="theme">
<div class="header">
<div class="about">
<li id="info">Fe</li>
</div>
<div id="info-overlay" class="overlay">
info
</div>
</div>
<div class="footer">
<div class="left">
<div class="name">
<p>Corporate dfsasdfdsafs</p>
</div>
</div>
</div>
</div>

Make elements below absolute positioned div clickable

I am working on a project where I need to upload screenshots that are copy pasted into the browser. The system works but I have a problem to click the images to show them in full-screen.
I made a JSFiddle of what it looks like:
<div id="screenshot-container" class="vertical-scroll-div">
<div id="editor" contenteditable="true"> </div>
<img class="screenshot" src="https://blog.xenproject.org/wp-content/uploads/2014/10/Testing.jpg" />
<img class="screenshot" src="https://blog.xenproject.org/wp-content/uploads/2014/10/Testing.jpg" />
<img class="screenshot" src="https://blog.xenproject.org/wp-content/uploads/2014/10/Testing.jpg" />
<img class="screenshot" src="https://blog.xenproject.org/wp-content/uploads/2014/10/Testing.jpg" />
<img class="screenshot" src="https://blog.xenproject.org/wp-content/uploads/2014/10/Testing.jpg" />
</div>
.vertical-scroll-div {
width: 100%;
padding-top: 10px;
height: 220px;
min-height: 220px;
overflow-x: auto;
white-space: nowrap;
border: 2px dashed #a9a9a9;
}
#editor {
position: absolute;
top: 0px;
width: 100%;
height: 220px;
outline: 0;
}
.screenshot {
margin-left: 10px;
height: 200px;
width: 200px;
max-height: 200px;
max-width: 200px;
}
.screenshot:hover {
cursor: pointer;
border: solid 2px #3498db;
}
The editor div can't be used as parent because it will be cleared when inserting a new image.
Hope someone got an idea.
Thanks
Just add these properties to the .screenshot selector:
.screenshot {
position: relative;
z-index: 10;
}
use this css
.screenshot {
height: 200px;
margin-left: 10px;
max-height: 200px;
max-width: 200px;
position: relative;
width: 200px;
z-index: 5;
}

Children element not stretch parent container with fixed height

for some reason my child elements don't stretch to the main section which has a fixed height of 1000px.
I need to be able to have a fixed height off 1000px and max-width of 1000px. There's also a space between two divs. I need it to be more fluid and stretchy. Could anyone explain what is happening please? Thanks
body {
max-width: 1000px;
width: 100%;
margin: 0 auto;
}
.container {
min-height: 100%;
text-align: center;
background: green;
}
.main {
height: 1000px;
position: relative;
display: block;
}
.contain {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.top, .bottom {
z-index: 1;
top: 0;
bottom: 0;
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
}
.top img {
background-color: red;
height: 379px;
width: 100%
}
.bottom {
background-color: yellow;
height: 379px;
width: 100%;
}
<div class="container">
<section class="main">
<div class="contain">
<div class="top">
<img class="img">
</div>
<div class="bottom">
<div class="content">
<h1>
eoufiwueg
</h1>
<p>
difhewiuhfiuwehfiuhweuifhweiuhfuiewhfiuhweiufhewiuhfuiwehfiuhweiufhiweuhfiuhewiufhweiuhfiuwehfiuhweiufhiuwehfiuwehfiuhweiufhewfiuhweifuhweiufhiuwehfiuwehfiuwehfiuwhefiuhweiufhwiuehfiuwehfiuwehfiuhweiufhweiufhewuhfiuwehfiuwehiufhewiufhiweuhf
difhewiuhfiuwehfiuhweuifhweiuhfuiewhfiuhweiufhewiuhfuiwehfiuhweiufhiweuhfiuhewiufhweiuhfiuwehfiuhweiufhiuwehfiuwehfiuhweiufhewfiuhweifuhweiufhiuwehfiuwehfiuwehfiuwhefiuhweiufhwiuehfiuwehfiuwehfiuhweiufhweiufhewuhfiuwehfiuwehiufhewiufhiweuhf
difhewiuhfiuwehfiuhweuifhweiuhfuiewhfiuhweiufhewiuhfuiwehfiuhweiufhiweuhfiuhewiufhweiuhfiuwehfiuhweiufhiuwehfiuwehfiuhweiufhewfiuhweifuhweiufhiuwehfiuwehfiuwehfiuwhefiuhweiufhwiuehfiuwehfiuwehfiuhweiufhweiufhewuhfiuwehfiuwehiufhewiufhiweuhf
</p>
</div>
</div>
</div>
</section>
</div>
add this css
.container {
min-height: 100%;
text-align: center;
word-wrap: break-word;/*add this property*/
background: green;
}

Position element over image element but the image changes size with the window

I have an image which changes size to the windows size, and I need to position an element (anchor tag) on it so that it is always in the same place relative to the image. The image is not a background image but an HTML element.
This question is very similar but is for when the image is a background image.
Position element over background image. But the BG img changes size with the window. CSS
<img src="images/img.jpg" >
Link that should be over the image in a certain location.
<div class="wrapper">
<img src="images/img.jpg">
Link that should be over the image in a certain location.
</div>
<style>
.wrapper {
position: relative;
}
a {
position: absolute;
top: 10%;
left: 10%;
}
</style>
Wrap the image etc in an shrink-wrapped div and base the positioning off that.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.map {
margin: 10px;
border: 5px solid red;
position: relative;
display: inline-block;
}
.map img {
max-width: 100%;
display: block;
}
.box {
width: 5%;
height: 5%;
background-image: url(http://www.clker.com/cliparts/W/0/g/a/W/E/map-pin-red.svg);
background-position: top center;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
}
#pin-1 {
top: 25%;
left: 36%;
}
.box:hover > .pin-text {
display: block;
}
.pin-text {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 75%;
white-space: nowrap;
display: none;
}
.pin-text h3 {
color: white;
text-shadow: 1px 1px 1px #000;
}
<div class="map">
<img src="http://connect.homes.com/wp-content/uploads/2012/05/200392710-0012.jpg" alt="" />
<div id="pin-1" class="box">
<div class="pin-text">
<h3>My House</h3>
</div>
</div>
</div>
Codepen Demo
Do you mean something like this?
.image {
position: relative;
width: 100%; /* for IE 6 */
}
a {
position: absolute;
top: 20px;
left: 0;
width: 100%;
}
<div class="image">
<img src="http://kingofwallpapers.com/grey/grey-001.jpg"/>
Link that should be over the image in a certain location.
</div>

Categories