Hello everybody out there reading my question :)
I am currently working on website with a "Masonry-lookalike" home screen.
There are 4x4 images with 2 different sizes and 1 image in every column is hidden.
So far it went pretty good but now I am stuck on the text-effect when hovering one of the images.
When the cursor is hovering over an image, a small text-box should appear on the bottom of it.
How do i get them one above the other without ruining the Masonry?
Where do i place the Text in the html code?
Sorry for my English, its not the best since I am from Austria ;)
HTML:
<!DOCTYPE html>
<!-- HTML -->
<html>
<!-- HEAD -->
<head>
<!-- STYLESHEET -->
<link href="style.css" rel="stylesheet" type="text/css" />
<!-- UTF-8 -->
<meta charset="utf-8">
</head>
<!-- HEAD END -->
<!-- --------------------------------------------------------------- -->
<!-- BODY -->
<body>
<div id="img-container">
<ul id="content">
<li><img class="img_a" src="data/placeholder_a.png" alt="" />
</li>
<li><img class="img_c" src="data/placeholder_c.png" alt="" />
</li>
<li><img class="img_b" src="data/placeholder_b.png" alt="" />
</li>
<li><img class="img_a" src="data/placeholder_a.png" alt="" />
</li>
<li><img class="img_a" src="data/placeholder_a.png" alt="" />
</li>
<li><img class="img_a" src="data/placeholder_a.png" alt="" />
</li>
<li><img class="img_c" src="data/placeholder_c.png" alt="" />
</li>
<li><img class="img_b" src="data/placeholder_b.png" alt="" />
</li>
<li><img class="img_c" src="data/placeholder_c.png" alt="" />
</li>
<li><img class="img_a" src="data/placeholder_a.png" alt="" />
</li>
<li><img class="img_a" src="data/placeholder_a.png" alt="" />
</li>
<li><img class="img_c" src="data/placeholder_c.png" alt="" />
</li>
<li><img class="img_b" src="data/placeholder_b.png" alt="" />
</li>
</ul>
</div>
</body>
<!-- BODY END -->
</html>
<!-- HTML END -->
CSS:
body {
margin: 0;
padding: 0;
}
#img-container {
width: 1200px;
margin: 0 auto;
font-size: 0;
}
#content {
column-count: 4;
column-gap: 10px;
}
#content li img {
margin-bottom: 10px;
width: 100%;
display: block;
}
/* --------------------- HOVER EFFECTS --------------------- */
.img_a:hover {
opacity: 0.5;
}
.img_b:hover {
opacity: 0.5;
}
.img_c:hover {
opacity: 0.5;
}
I will append some zip.-file with .css .html and images.
Link to Dropbox
The following writeup might help you:
http://geekgirllife.com/place-text-over-images-on-hover-without-javascript/
It is one of the simplest methods I came across. Place the div tag containing text right below the img tag.
Related
Here is the HTML and then the CSS. As you can see the aside is covering all the li items. The CSS is using the aside tag to add the border around all of these elements, but it is only adding a border around the first li item. I have tried adding a separate aside element around each li to overcome this but this didn't work. I have inspected using chrome dev tools and couldn't understand why this is happening.
<aside>[enter image description here][1]
<h5><strong>Related posts</strong></h5>
<ul>
<li class="related-post">
<img
src="img/mantyping.jpg"
alt="mantyping"
width="100"
height="70"
/>
<div>
<a href="Howtolearnwebdevelopment.html" class="related-link"
>How to learn web development</a
>
<p class="related-author"><strong>By Jonas Schmed</strong></p>
</li>
</div>
<li class="related-post">
<img
src="img/csspower.jpg"
alt="lightning"
width="100"
height="70"
/>
<div>
<a href="Unknownpowersofcss.html" class="related-link"
>The unknown powers of css</a
>
<p class="related-author"><strong>By Jim Dillon</strong></p>
</li>
</div>
<li class="related-post">
<img
src="img/javascriptcode.png"
alt="javascript code"
width="100"
height="70"
/>
<div>
<a href="javascriptisawesome.html" class="related-link"
>Why Javascript is awesome</a
>
<p class="related-author"><strong>By Matilda</strong></p>
</li>
</div>
</ul>
</aside>
aside {
background-color: #f7f7f7;
border-top: 5px solid #1098ad;
border-bottom: 5px solid #1098ad;
padding: 50px;
width: 500px;
}````
[1]: https://i.stack.imgur.com/1hIls.png
I am not sure if you are looking forward to adding a border to all list items or want to add a border to the entire aside. In this solution, I'm showing how you can add borders to each list of items. If you want to add a border to the entire <aside>, just replace the .related-post class with aside. Be careful about the code formatting with correct opening and closing tags, else it may break the UI.
/* aside { */
.related-post {
background-color: #f7f7f7;
border: 5px solid #1098ad;
padding: 50px;
width: 500px;
list-style-type: none; /* It removes the bullet */
}
<aside>
<h5>
<strong>Related posts</strong>
</h5>
<ul>
<li class="related-post">
<img src="https://image.shutterstock.com/image-photo/smiling-young-man-sit-table-600w-1939452445.jpg" alt="mantyping" width="100" height="70" />
<div>
How to learn web development
<p class="related-author">
<strong>By Jonas Schmed</strong>
</p>
</div>
</li>
<li class="related-post">
<img src="https://image.shutterstock.com/image-vector/vector-illustration-abstract-electric-lightning-600w-1706216764.jpg" alt="lightning" width="100" height="70" />
<div>
The unknown powers of css
<p class="related-author">
<strong>By Jim Dillon</strong>
</p>
</div>
</li>
<li class="related-post">
<img src="https://image.shutterstock.com/image-photo/digital-technology-software-development-concept-600w-2111828198.jpg" alt="javascript code" width="100" height="70" />
<div>
Why Javascript is awesome
<p class="related-author">
<strong>By Matilda</strong>
</p>
</div>
</li>
</ul>
</aside>
Hope it helps.
This is the current state:
and I want it like this:
I have done editing through photoshop to show my desired output. I have tried many things but i'm not successful.
This is the HTML:
<body>
<header>
<h1>Maxtergo - Guaranteed Perfect Product</h1>
<nav class='main-menu'>
<ul>
<li>
<a class='active' href='#'>Home</a>
</li>
<li>
<a href='#'>Portfolio</a>
</li>
<li>
<a href='#'>Services</a>
</li>
<li>
<a href='#'>Feature</a>
</li>
<li>
<a href='#'>Contact</a>
</li>
<li>
<a href='#'>Help</a>
</li>
</ul>
</nav>
</header>
<div id='slider'>
<div id='bannerscollection_zoominout_opportune'>
<div class='myloader'></div>
<!-- CONTENT -->
<ul class="bannerscollection_zoominout_list">
<li data-initialZoom="0.77" data-finalZoom="0.77" data-horizontalPosition="left" data-verticalPosition="center" data-text-id="#bannerscollection_zoominout_photoText2" ><img src="images/02_opportune.jpg" alt="" width="2500" height="1172" /></li>
<li data-initialZoom="0.77" data-finalZoom="0.77" data-horizontalPosition="left" data-verticalPosition="center" data-text-id="#bannerscollection_zoominout_photoText3" ><img src="images/03_opportune.jpg" alt="" width="2500" height="1172" /></li>
<li data-initialZoom="0.77" data-finalZoom="0.77" data-horizontalPosition="left" data-verticalPosition="center" data-text-id="#bannerscollection_zoominout_photoText4" ><img src="images/04_opportune.jpg" alt="" width="2500" height="1172" /></li>
<li data-initialZoom="0.77" data-finalZoom="0.77" data-horizontalPosition="left" data-verticalPosition="center" data-text-id="#bannerscollection_zoominout_photoText5" ><img src="images/05_opportune.jpg" alt="" width="2500" height="1172" /></li>
And no css is on the slider.
and this is header CSS:
header {
overflow: hidden;
padding: 25px 0px;
width: 960px;
margin: 0 auto; }
To make sure your header is shown above add z-index
header {
z-index: 99999;
overflow: hidden;
padding: 25px 0px;
width: 960px;
position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
Firstly wrap up your both of your <header> and "slider" inside a
wrapper. Make sure that you have to provide it position "relative".
After that you have to go for making <header> as position absolute and
provide height and width as per your requirements. Then you must have to
add z-index to <header>. your <header> styles we will code here'll
look like this:
header {
position:absolute;
top:0;
bottom:auto;
left:0;
right:0;
margin:auto;
width:100%;
height:auto;
}
I have been created css3 image slideshow, Its working perfect, but location of slideshow is absolutely incorrect.
Here is the code in html:
<div id = "header">
<div class = "wrap">
<div class = "logo">
<img src = "img/photo.jpg" alt = "" />
</div>
<div class = "navigation">
<ul>
<li>HOME</li>
<li>ABOUT </li>
<li>HISTORY </li>
<li>NEWS </li>
<li>CONTACT </li>
<li>CONTACT </li>
<li>CONTACT </li>
</ul>
</div>
</div>
</div>
<div class = "wrap">
<div class="slides">
<ul>
<li><img src="slide-1.jpg" alt="" /></li>
<li><img src="slide-2.jpg" alt="" /></li>
<li><img src="slide-3.jpg" alt="" /></li>
<li><img src="slide-4.jpg" alt="" /></li>
</ul>
</div>
</div>
<div class = "wrap">
<p>Saina Nehwal (About this sound pronunciation (help.info); born 17 .../p>
</div>
Here is my working jsfiddle: http://jsfiddle.net/qj6s0xdh/
Can anyone help me to align the position of slideshow?
Thanks in advance.
Is this what you want?
http://jsfiddle.net/qj6s0xdh/2/
I don't think the float: left; in the #header is what you want.
Here is the slider is now center-aligned by just adding following to the ul of slider
width: 60%;
margin: auto;
display: block;
Add the following properties:
.slides ul li {
width:100%;
}
.slides ul li image {
margin:0 auto;
}
This line displays my logo:
<li><img class="logo" src="selector/logo.png" alt="" /></li>
How can I add a clickable link to this image?
Try this here:
<li>
<a href="target.html">
<img class="logo" src="selector/logo.png" alt="" />
</a>
</li>
You want properly also to remove the border around the image. To fix that use this CSS:
.logo {
border: 0;
}
Are you just asking how to make the image a hyperlink to itself? Like this?:
<li>
<a href="selector/logo.png">
<img class="logo" src="selector/logo.png" alt="" />
</a>
</li>
I am using unsorted list to display image with the a tag to implement lightbox on each images to see a bigger version of the image.
On Mozilla Firefox, Google chrome and Opera the image are displayed with the correct size but in Internet Explorer they are smaller.
W3C Validator reports 0 errors and I declared the Doctype.
Here is the source code of the web page :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Makeup Artist - Hair Stylist | Natalie Bennet</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/mouseoverscroll.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js" ></script>
<div id="border"></div>
<div id="hide"></div>
<div id="header" align="center">
<div id="logo" align="center">
<img src="images/makeup-artist-hair-stylist.jpg" alt="Natalie Bennett" />
</div>
</div>
<div class="footer-arrow previous" style="left:1%; position:fixed;">
<img src="images/left-arrow-out.png"
onmouseover="this.src='images/arrow-left-on.png'"
onmouseout="this.src='images/left-arrow-out.png'" alt="previous" /></div>
<div class="galleryWrapper">
<ul class="galleryItems" style="list-style-type:none;">
<li><img class="portfolio" src="images/portfolio/Sofia_1.jpg" alt="" /></li>
<li><img class="portfolio" src="images/portfolio/Sofia_2.jpg" alt="" /></li>
<li><img class="portfolio" src="images/portfolio/Sofia_3.jpg" alt="" /></li>
<li><img class="portfolio" src="images/portfolio/Sofia_4a.jpg" alt="" /></li>
<li><img class="portfolio" src="images/portfolio/Sofia_4b.jpg" alt="" /></li>
<li><img class="portfolio" src="images/portfolio/Sofia_4.jpg" alt="" /></li>
<li><img class="portfolio" src="images/portfolio/Sofia_5.jpg" alt="" /></li>
<li><img class="portfolio" src="images/portfolio/Andro_1.jpg" alt="" /></li>
<li><img class="portfolio" src="images/portfolio/Andro_2.jpg" alt="" /></li>
<li><img class="portfolio" src="images/portfolio/Andro_3.jpg" alt="" /></li>
<li><img class="portfolio" src="images/portfolio/Andro_4.jpg" alt="" /></li>
[...]
<li><img class="portfolio" src="images/portfolio/T1.jpg" alt="" /></li>
<li><img class="portfolio" src="images/portfolio/T2.jpg" alt="" /></li>
</ul>
</div>
<div class="footer-arrow next" style="left:96.5%; position:fixed;">
<img src="images/right-arrow-out.png"
onmouseover="this.src='images/arrow-right-on.png'"
onmouseout="this.src='images/right-arrow-out.png'" alt="next" /></div>
<div id="footer">
<div id="site-navigation" align="center">
<ul>
<li>Portfolio</li>
<li>About</li>
<li>Backstage</li>
<li>Contact</li>
</ul>
</div>
<div id="footer-menu">
</div>
<div id="copyright">
© Natalie Bennett 2012
</div>
</div>
<script type="text/javascript">
$('.galleryItems a').lightBox({fixedNavigation:true});
openFooter();
var menuopen = false;
function openFooter(){
$('#footer').animate({
height: 40,
bottom:0
}, 750, 'linear');
}
function closeFooter(){
$('#footer').animate({
height: 20,
bottom:0
}, 750, 'linear');
$('#footer-button').css("backgroundPosition","center 0px");
}
var currentImage = 0;
function closeThenNavigate(url)
{
$('#footer').animate({
height: 20,
bottom:0
}, 750, 'linear', function() {
window.location.href=url+"?i="+currentImage;
});
}
</script>
</body>
</html>
And here is the CSS for the images :
img {
border:none;
}
ul{
padding:0px;
}
.galleryWrapper{
top:6%;
left:0px;
width:100%;
height:100%;
display:inline-block;
position: fixed;
width:100%;
overflow:hidden;
}
.galleryItems li {
list-style-type: none;
float:left;
}
.portfolio{
widht:80%;
height:88%;
margin: 6px;
cursor:pointer;
margin-bottom:250px;;
}
Do you know why they are smaller in IE ?
Edit, forgot the link : http://www.zackdibe.com/final/
use pixel Instead of % in width and height size ...
Indeed use pixels instead of % or live with it. IE7/8 uses quite a lot bigger area for the addressbar (bigger then for example Chrome or FF), so the viewable area is smaller, from where the percentage is calculated.
Give a position:relative; value to the .portfolio elements and then try.