I am relatively new to css/html.
I have been browsing about this issue for a while, but did not find a solution.
The issue is that, if I use the below code (that uses Bulma), the clickable area when hovering on img3.jpg is the entire block starting at the first <div class="columns is-multiline">. I suspect the issue might be some clash between Bulma is-column / is-multiline, and the overlay CSS definition I provided?
<style type="text/css">
ul {
list-style: none;
padding: 10px 10px 10px 30px
}
ul li {
font-size: 120%;
margin-left: 10px;
list-style-type: circle;
}
</style>
<style>
.container {
position: relative;
width: 100%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
</style>
<div class="columns is-multiline">
<div class="column is-9">
<div class="content">
<h3> About us </h3>
<hr>
<p align="left" style="font-size:120%;">
some content ...
</p>
</div>
<div class="columns is-multiline">
<div class="column is-4">
<img src="/images/img1.jpg" alt="" class="image"/>
</div>
<div class="column is-4">
<img src="/images/img2.jpg" alt="" class="image"/>
</div>
<div class="column is-4">
<div class="container">
<img src="/images/img3.jpg" alt="" class="image"/>
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</div>
</div>
<p align="left" style="font-size:120%;">
some text ...
<ul>
<li>
item 1
<a href="url1">
<b>link</b>
</a>
</li>
<li>
item2
<a href="url2">
<b>link</b></a>
</li>
</ul>
</p>
</div>
<div class="column is-3">
{% include latest-posts.html %}
</div>
</div>
<hr>
try this document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.4/css/bulma.min.css">
<title>Document</title>
<style>
body {
padding-top: 2em;
}
ul {
list-style: none;
padding: 10px 10px 10px 30px
}
ul li {
font-size: 120%;
margin-left: 10px;
list-style-type: circle;
}
.container {
position: relative;
width: 100%;
}
.columns {
display: flex;
}
.image {
display: block;
width: 100%;
max-width: 320px;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.test {
position: absolute;
left: 0;
border-bottom: green solid;
font-size: .5em;
font-weight: bold;
}
.test-top {
top: 0;
}
.test-bottom {
bottom: 0;
}
</style>
</head>
<body>
<div class="columns is-multiline">
<div class="column is-9">
<div class="content">
<h3> About us </h3>
<hr>
<p style="font-size:120%; text-align:left">
some content ...
</p>
</div>
<div class="columns is-multiline">
<p class="test test-top">start columns / is-multiline</p>
<div class="column is-4">
<img src="https://w7.pngwing.com/pngs/715/287/png-transparent-number-1-number-1-creative-cartoon-thumbnail.png" alt="" class="image" />
</div>
<div class="column is-4">
<img src="https://w7.pngwing.com/pngs/664/223/png-transparent-number-2-number-number-2-image-file-formats-text-heart-thumbnail.png" alt="" class="image" />
</div>
<div class="column is-4">
<div class="container">
<img src="https://w7.pngwing.com/pngs/111/727/png-transparent-number-3-illustration-number-blue-crystal-number-three-teal-number-symbol-thumbnail.png" alt="" class="image" />
<div class="overlay">
<p class="test test-top">star overlay</p>
<div class="text">Hello World</div>
<p class="test test-bottom">end overlay</p>
</div>
</div>
</div>
<p class="test test-bottom">end columns / is-multiline</p>
</div>
<p style="font-size:120%; text-align:left">
some text ...
<ul>
<li>
item 1
<a href="url1">
<b>link</b>
</a>
</li>
<li>
item2
<a href="url2">
<b>link</b></a>
</li>
</ul>
</p>
</div>
<div class="column is-3">
{% include latest-posts.html %}
</div>
</div>
<hr>
</body>
</html>
Related
I'm trying to make the paragraph texts appear when I hover over each of the images. The text should be in the center of the image. I'm not entirely sure how I can achieve this.
Another issue I have is that if I set top: 0 and remove the transform, the text isn't actually positioned at top: 0, there is some margin between the top and where the text is.
Codepen below:
https://codepen.io/uhzyrneh/pen/WNvOaWB
* {
padding: 0;
margin: 0;
}
.container {
display: grid;
grid-template-columns: repeat(4, 25%);
background-color: black;
}
.container div {
position: relative;
width: 100%;
overflow: hidden;
}
.container div img {
width: 100%;
transition: 0.4s;
transform: scale(1.1);
opacity: 0.7;
}
.container div img:hover {
transform: scale(1.03);
opacity: 1;
}
.container div p {
color: white;
position: absolute;
top: 0;
left: 50%;
font-size: 50px;
opacity: 1;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="">
<img id="pic1" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
<p>Test</p>
</div>
<div class="">
<img id="pic2" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
<p>Test2</p>
</div>
<div class="">
<img id="pic3" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
</div>
<div class="">
<img id="pic4" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
</div>
<div class="">
<img id="pic5" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
</div>
<div class="">
<img id="pic6" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
</div>
<div class="">
<img id="pic7" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
</div>
<div class="">
<img id="pic8" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
</div>
</div>
</body>
</html>
The rule you're looking for is:
.container div:hover p {
display: inline;
}
And hide the text to begin with by adding display: none; to .container div p.
Also, the text is at the top of the div. If you highlight it, you can see it's right up against the top.
* {
padding: 0;
margin: 0;
}
.container {
display: grid;
grid-template-columns: repeat(4, 25%);
background-color: black;
}
.container div {
position: relative;
width: 100%;
overflow: hidden;
}
.container div img {
width: 100%;
transition: 0.4s;
transform: scale(1.1);
opacity: 0.7;
}
.container div img:hover {
transform: scale(1.03);
opacity: 1;
}
.container div p {
color: white;
position: absolute;
top: 0;
left: 50%;
font-size: 50px;
opacity: 1;
display: none;
}
.container div:hover p {
display: inline;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="">
<img id="pic1" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
<p>Test</p>
</div>
<div class="">
<img id="pic2" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
<p>Test2</p>
</div>
<div class="">
<img id="pic3" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
</div>
<div class="">
<img id="pic4" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
</div>
<div class="">
<img id="pic5" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
</div>
<div class="">
<img id="pic6" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
</div>
<div class="">
<img id="pic7" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
</div>
<div class="">
<img id="pic8" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
</div>
</div>
</body>
</html>
You could use like this:
* {
padding: 0;
margin: 0;
}
.container {
display: grid;
grid-template-columns: repeat(4, 25%);
background-color: black;
}
.container div {
position: relative;
width: 100%;
overflow: hidden;
}
.container div img {
width: 100%;
transition: 0.4s;
transform: scale(1.1);
opacity: 0.7;
}
.container div img:hover {
transform: scale(1.03);
opacity: 1;
}
.container div p {
color: #fff;
position: absolute;
top: 0;
left: 50%;
font-size: 50px;
opacity: 1;
}
.container div a:hover::after{
content: attr(title);
display:block;
position:absolute;
width:100%;
height:200px;
top:50px;
left:0;
z-index:1;
opacity: 1;
font-size: 50px;
color:#fff;
text-align:center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="">
<img id="pic1" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
</div>
<div class="">
<img id="pic2" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
</div>
<div class="">
<img id="pic3" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
</div>
<div class="">
<img id="pic4" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
</div>
<div class="">
<img id="pic5" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
</div>
<div class="">
<img id="pic6" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
</div>
<div class="">
<img id="pic7" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
</div>
<div class="">
<img id="pic8" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
</div>
</div>
</body>
</html>
So, I am just discovering the html/css programming world, and my goal is to align images side by side with a link in the middle. Right now, I am trying with a text.
My problem is: I'm using transform: translate(); for the text part, but if I float:left the image the text will stay in the center of the body instead of in the center of the image, and will be stackered.
Or is there a better way to do this?
html
<!DOCTYPE html>
<html>
<head>
<title>Twice</title>
<link rel="stylesheet" type="text/css" href="twices.css">
<link href="https://fonts.googleapis.com/css?family=Lora:700&display=swap" rel="stylesheet">
</head>
<body>
<h1>Twice</h1>
<div>
<div class="container">
<img src="nayeon.jpg" alt="nayeon" name="Nayeon">
<div class="middle">
<div class="text" style="color:#81d4fa">Nayon</div>
</div>
</div>
<div class="container">
<img src="jeongyeon.jpg">
<div class="middle">
<div class="text" style="color:#81d4fa">Jeongyeon</div>
</div>
</div>
</body>
</html>
css
img{
border-radius: 10%;
float: left;
width: 10%;
margin: 0.5%;
}
.container{
position: relative;
text-align: center;
color: white;
}
.middle{
transition: .5s ease;
opacity: 1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -20%);
transform: translate(-590%, -250%);
}
.text{
font-family: Lora;
color: white;
position: absolute;
font-size: 16px;
padding: 16px 32px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
example of what I want
---------------------------------------- update --------------------------------
I actually figured it out what I had to do. Putting it here if someone else needs it. It might seem silly but I was having a hard time with it.
Answer: the float property had to reach the image and the text so I transferred the float:left in the image to de div class that holds both the image and the text. Can't believe it was so simple.
new html
<!DOCTYPE html>
<html>
<head>
<title>Twice</title>
<link rel="stylesheet" type="text/css" href="twices.css">
<link href="https://fonts.googleapis.com/css?family=Lora:700&display=swap" rel="stylesheet">
</head>
<body>
<h1>Twice</h1>
<div>
<div class="container">
<img src="nayeon.jpg" alt="nayeon" name="Nayeon">
<div class="middle">
<div class="link" >Nayon</div>
</div>
</div>
<div class="container">
<img src="jeongyeon.jpg">
<div class="middle">
<div class="link" >Jeongyeon</div>
</div>
</div>
<div class="container">
<img src="momo.jpg">
<div class="middle">
<div class="link" >Momo</div>
</div>
</div>
<div class="container">
<img src="sana.jpg">
<div class="middle">
<div class="link" >Sana</div>
</div>
</div>
<div class="container">
<img src="jihyo.jpg">
<div class="middle">
<div class="link" >Jihyo</div>
</div>
</div>
<div class="container">
<img src="mina.jpg">
<div class="middle">
<div class="link" >Mina</div>
</div>
</div>
<div class="container">
<img src="dahyun.jpg">
<div class="middle">
<div class="link" >Dahyun</div>
</div>
</div>
<div class="container">
<img src="chaeyoung.jpg">
<div class="middle">
<div class="link" >Chaeyoung</div>
</div>
</div>
<div class="container">
<img src="tzuyu.jpg">
<div class="middle">
<div class="link" >Tzuyu</div>
</div>
</div>
</div>
</body>
</html>
NEW CSS
img{
border-radius: 10%;
/*float: left;*/
width: 100%;
}
.container{
margin: 0.5%;
position: relative;
text-align: center;
width: 10%;
color: white;
float: left;/*--------- o float é no conteúdo todo--------------*/
}
.middle{
/*transition: .5s ease;*/
opacity: 1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -20%);
transform: translate(-590%, -250%);
}
.link{
font-family: Lora;
color: white;
position: absolute;
font-size: 16px;
padding: 16px 32px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
a{
text-decoration: none;
}
I have a simple HTML site with CSS going, but i noticed a very very small line next to all my uploaded images that i use for links. I'm guessing that this is like a direction to img position, but it is so small that i can't actually see what it is. Anyone know what it is and how i get rid of it???
Picture or it didn't happen
the 4 images, with 1 working and 3 displaying the thingy
body {
background-image: url("Baggrund.png");
}
.title {
font-family: sans-serif;
color: #2E2E2E;
font-size: 50px;
margin-top: 100px;
font-weight: 1000;
}
.container {
position: relative;
width: 200px;
height: 200px;
display: inline-block;
margin-left: 50px;
margin-top: 50px;
}
.image {
display: block;
width: 200px;
height: 200px;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: sans-serif;
}
.overlayFade {
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.overlay {
position: absolute;
opacity: 0;
transition: all .3s ease;
background-color: #008cba;
}
.container:hover .overlay,
.container:hover .overlayFade {
opacity: 1;
}
<div align="center">
<div>
<div class="container">
<a href="randomsite.com" </a>
<img src="https://dummyimage.com/300x300/3939de/fff" alt="Tips" class="image">
<div class="overlay overlayFade">
<div class="text">QGIS Tips & Tricks</div>
</div>
</div>
<div class="container">
<a href="randomsite.com" </a>
<img src="https://dummyimage.com/300x300/3939de/fff" alt="KortInfo" class="image">
<div class="overlay overlayFade">
<div class="text">KortInfo</div>
</div>
</div>
<div class="container">
<a href="randomsite.com" </a>
<img src="https://dummyimage.com/300x300/3939de/fff" alt="Metadata" class="image">
<div class="overlay overlayFade">
<div class="text">Metadatabasen</div>
</div>
</div>
<div class="container">
<a href="randomsite.com" </a>
<img src="https://dummyimage.com/300x300/3939de/fff" alt="A-Z" class="image">
<div class="overlay overlayFade">
<div class="text">A-Z</div>
</div>
</div>
</div>
That is the underline that is present default in the anchor tag i just used text-decoration: none on the anchor tag and it is gone
I hope this is what you are looking for
body {
background-image: url("Baggrund.png");
}
.title {
font-family: sans-serif;
color: #2E2E2E;
font-size: 50px;
margin-top: 100px;
font-weight: 1000;
}
a
{
text-decoration:none;
}
.container {
position: relative;
width: 200px;
height: 200px;
display: inline-block;
margin-left: 50px;
margin-top: 50px;
}
.image {
display: block;
width: 200px;
height: 200px;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: sans-serif;
}
.overlayFade {
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.overlay {
position: absolute;
opacity: 0;
transition: all .3s ease;
background-color: #008cba;
}
.container:hover .overlay,
.container:hover .overlayFade {
opacity: 1;
}
<div align="center">
<div>
<div class="container">
<a href="randomsite.com" </a>
<img src="https://dummyimage.com/300x300/3939de/fff" alt="Tips" class="image">
<div class="overlay overlayFade">
<div class="text">QGIS Tips & Tricks</div>
</div>
</div>
<div class="container">
<a href="randomsite.com" </a>
<img src="https://dummyimage.com/300x300/3939de/fff" alt="KortInfo" class="image">
<div class="overlay overlayFade">
<div class="text">KortInfo</div>
</div>
</div>
<div class="container">
<a href="randomsite.com" </a>
<img src="https://dummyimage.com/300x300/3939de/fff" alt="Metadata" class="image">
<div class="overlay overlayFade">
<div class="text">Metadatabasen</div>
</div>
</div>
<div class="container">
<a href="randomsite.com" </a>
<img src="https://dummyimage.com/300x300/3939de/fff" alt="A-Z" class="image">
<div class="overlay overlayFade">
<div class="text">A-Z</div>
</div>
</div>
</div>
I have a webpage that uses purely html and CSS (no JavaScript yet). The webpage contains a simple, fixed position header with hover dropdowns for each category. The webpage content itself is arranged in 'tiles' that produce effects on hover to emphasize them (and link to other pages). I will attach an image to better explain. The dropdown works fine when at the very top of the webpage, however if the dropdown menu falls on top of one of the tiles the dropdown will disappear and trigger the tile hover effects instead.
I have ensured that all parts of the dropdown have a z-index greater than the tiles.
Dropdown HTML:
<nav class="navigation">
<ul>
<li class=dropdown>
catagory1
<div class="dropdown-content">
content1
content2
content3
</div>
</li>
<li class="dropdown">
catagory2
<div class="dropdown-content">
content4
content5
</div>
</li>
</ul>
</nav>
Page content HTML (example for single tile, code repeated):
<a href="content6.html" class="tile">
<img src="image1.jpg>
<div class="container">
<div class="overlay"></div> /* overlay that animates on hover */
/* content for the tile */
</div>
</a>
relevant CSS:
navigation {
position: fixed;
}
.navigation li {
display: inline-block;
margin: 0 5%;
}
.dropdown {
position: relative;
display: inline-block;
z-index: 20;
}
.dropdown-content {
display: none;
position: absolute;
}
.dropdown-content a {
display: inline-block;
position: relative;
}
.dropdown-content a:hover {
background-color: blue;
color: white;
}
.dropdown:hover .dropdown-content{
display: block;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
z-index: 17;
}
.tile:hover .overlay {
opacity: 0.1;
}
Image 1:
Top of page(Works Fine)
Image 2:
Scrolled down(Hovering over Content 3 will close dropdown)
I would like for the dropdown menu to stay on top of tiles regardless of whether or not the hover effects are triggered. I'm not sure if this will require JavaScript. Any help is appreciated!
Edit: Snippet Added
/* General Rules */
* {
margin: 0;
padding: 0;
border: none;
font-family: "DM Serif Text", serif;
}
body {
background-color: #1b1d35;
color: whitesmoke;
max-width: 100%;
overflow-x: hidden;
margin: 0 auto;
}
ul {
margin: inherit;
padding: none;
border: none;
list-style: none;
text-align: center;
}
li {
margin: inherit;
padding: none;
border: none;
}
a {
color: whitesmoke;
font-size: 2rem;
display: inline-block;
width: auto;
height: auto;
text-decoration: none;
margin: 0 auto;
transition-duration: 0.3s;
}
a:not(p):hover {
color: #38b6ff;
}
header {
position: fixed;
z-index: 10;
background-color: #7e7d7d;
width: 100%;
height: 10rem;
margin: inherit;
padding: none;
border: none;
}
#head-logo {
position: absolute;
width: 15%;
height: auto;
}
.navigation {
position: fixed;
z-index: 20;
width: 100%;
margin: 0 auto;
border: none;
padding: none;
top: 5rem;
}
.navigation li {
display: inline-block;
margin: 0 5%;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #7e7d7d;
box-shadow: 0 1rem 2rem 0 rgba(0,0,0,0.2);
}
.dropdown-content a {
font-size: 1.5rem;
color: whitesmoke;
text-decoration: none;
text-align: left;
display: inline-block;
width: 17.5rem;
}
.dropdown-content a:hover {background-color: #7e7d7dd8; box-shadow: 1rem rgb(0,0,0); color: rgb(56, 182, 255);}
.dropdown:hover .dropdown-content{display: block;}
.sidebar {
position: fixed;
top: 17rem;
margin-left: 0.1%;
text-align: left;
}
.sidebaritem{
font-size: 1rem;
margin-top: 1rem;
margin-left: 0;
text-align: left;
}
h3 {
font-size: 1.5rem;
margin: 1rem auto;
}
#main {
position: relative;
top: 12rem;
width: 65%;
margin: inherit;
}
img {
width: 100%;
height: auto;
}
.row {
height: 20rem;
}
.column {
float: left;
width: 31%;
padding: 1%;
position: relative;
}
#bigtile {
width: 64%;
padding: 1%;
}
.container {
position: relative;
}
/* Things that apply to all tiles */
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: #38b6ff;
z-index: 17;
}
/* Style for tiles where pictures take up full tile */
.pic-tile {
border-top: 5px solid #38b6ff;
}
.pic-tile .container img {
height:100%;
width:100%;
}
.pic-tile .container h2{
position: absolute;
left: 2%;
bottom: 2rem;
z-index: 7;
}
.pic-tile .container h3 {
position: absolute;
left: 2%;
bottom: 0;
z-index: 7;
}
.pic-tile:hover .overlay {
opacity: 0.1;
}
/* Style for regular tiles */
.tile img {
height: 50%;
width: 100%;
top: 0;
}
.tile {
background-color: gray;
bottom: 1%;
text-align: end;
position: relative;
width: 100%;
height: 100%;
border-top: 5px solid #38b6ff;
}
.tile .container{
font-size: 1rem;
position: relative;
margin-bottom: 1%;
margin-left: 1%;
}
.tile .container p{
font-size: 1rem;
position: relative;
text-align: end;
color: whitesmoke;
}
.tile:hover .overlay {
opacity: 0.1;
}
<html>
<body>
<!-- <img> insert logo here -->
<header>
<nav class="navigation">
<ul>
<li class=dropdown>
Catagory1
<div class="dropdown-content">
content1
content2
content3
</div>
</li>
<li class="dropdown">
Catagory2
<div class="dropdown-content">
content4
content5
</div>
</li>
<li>Catagory3</li>
</ul>
</nav>
</header>
<div id="main">
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
This problem can be solved by changing the z-index of headerto 20. Even though the z-index of the .dropdownclass was 20, the z-index of the header element was 10.
Although the z-index is not inherited, one needs to take into consideration the stacking context. For example, if a sibling element B has a z-index that is greater than the z-index of sibling element A, B will be above A. If Ahas a child element that has a z-index higher than that of element B, B will still be shown above A provided that B has a greater z-index than A.
For more information about stacking contexts, check out this Post.
/* General Rules */
* {
margin: 0;
padding: 0;
border: none;
font-family: "DM Serif Text", serif;
}
body {
background-color: #1b1d35;
color: whitesmoke;
max-width: 100%;
overflow-x: hidden;
margin: 0 auto;
}
ul {
margin: inherit;
padding: none;
border: none;
list-style: none;
text-align: center;
}
li {
margin: inherit;
padding: none;
border: none;
}
a {
color: whitesmoke;
font-size: 2rem;
display: inline-block;
width: auto;
height: auto;
text-decoration: none;
margin: 0 auto;
transition-duration: 0.3s;
}
a:not(p):hover {
color: #38b6ff;
}
header {
position: fixed;
z-index: 20;
background-color: #7e7d7d;
width: 100%;
height: 10rem;
margin: inherit;
padding: none;
border: none;
}
#head-logo {
position: absolute;
width: 15%;
height: auto;
}
.navigation {
z-index:20;
position: fixed;
width: 100%;
margin: 0 auto;
border: none;
padding: none;
top: 5rem;
}
.navigation li {
display: inline-block;
margin: 0 5%;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #7e7d7d;
box-shadow: 0 1rem 2rem 0 rgba(0,0,0,0.2);
}
.content1{
}
.dropdown-content a {
font-size: 1.5rem;
color: whitesmoke;
text-decoration: none;
text-align: left;
display: inline-block;
width: 17.5rem;
}
.dropdown-content a:hover {background-color: #7e7d7dd8; box-shadow: 1rem rgb(0,0,0); color: rgb(56, 182, 255);}
.dropdown:hover .dropdown-content{display: block;}
.sidebar {
position: fixed;
top: 17rem;
margin-left: 0.1%;
text-align: left;
}
.sidebaritem{
font-size: 1rem;
margin-top: 1rem;
margin-left: 0;
text-align: left;
}
h3 {
font-size: 1.5rem;
margin: 1rem auto;
}
#main {
position: relative;
top: 12rem;
width: 65%;
margin: inherit;
}
img {
width: 100%;
height: auto;
}
.row {
height: 20rem;
}
.column {
float: left;
width: 31%;
padding: 1%;
position: relative;
}
#bigtile {
width: 64%;
padding: 1%;
}
.container {
position: relative;
}
/* Things that apply to all tiles */
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: #38b6ff;
z-index: 17;
}
/* Style for tiles where pictures take up full tile */
.pic-tile {
border-top: 5px solid #38b6ff;
}
.pic-tile .container img {
height:100%;
width:100%;
}
.pic-tile .container h2{
position: absolute;
left: 2%;
bottom: 2rem;
z-index: 7;
}
.pic-tile .container h3 {
position: absolute;
left: 2%;
bottom: 0;
z-index: 7;
}
.pic-tile:hover .overlay {
opacity: 0.1;
}
/* Style for regular tiles */
.tile img {
height: 50%;
width: 100%;
top: 0;
}
.tile {
background-color: gray;
bottom: 1%;
text-align: end;
position: relative;
width: 100%;
height: 100%;
border-top: 5px solid #38b6ff;
}
.tile .container{
font-size: 1rem;
position: relative;
margin-bottom: 1%;
margin-left: 1%;
}
.tile .container p{
font-size: 1rem;
position: relative;
text-align: end;
color: whitesmoke;
}
.tile:hover .overlay {
opacity: 0.1;
}
<!DOCTYPE html >
<html>
<body>
<!-- <img> insert logo here -->
<header>
<nav class="navigation">
<ul>
<li class=dropdown>
Catagory1
<div class="dropdown-content">
content1
content2
content3
</div>
</li>
<li class="dropdown">
Catagory2
<div class="dropdown-content">
content4
content5
</div>
</li>
<li>Catagory3</li>
</ul>
</nav>
</header>
<div id="main">
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
Your hover effect is only applied to a, which means it loses the effect when mouse is not over the actual link.
Apply the hover to li instead, so it will cover it properly.
a:not(p):hover {
color: #38b6ff;
}
use this instead.
li:hover {
color: #38b6ff;
}
/* General Rules */
* {
margin: 0;
padding: 0;
border: none;
font-family: "DM Serif Text", serif;
}
body {
background-color: #1b1d35;
color: whitesmoke;
max-width: 100%;
overflow-x: hidden;
margin: 0 auto;
}
ul {
margin: inherit;
padding: none;
border: none;
list-style: none;
text-align: center;
}
li {
margin: inherit;
padding: none;
border: none;
}
a {
color: whitesmoke;
font-size: 2rem;
display: inline-block;
width: auto;
height: auto;
text-decoration: none;
margin: 0 auto;
transition-duration: 0.3s;
}
li:hover {
color: #38b6ff;
}
header {
position: fixed;
z-index: 10;
background-color: #7e7d7d;
width: 100%;
height: 10rem;
margin: inherit;
padding: none;
border: none;
}
#head-logo {
position: absolute;
width: 15%;
height: auto;
}
.navigation {
position: fixed;
z-index: 20;
width: 100%;
margin: 0 auto;
border: none;
padding: none;
top: 5rem;
}
.navigation li {
display: inline-block;
margin: 0 5%;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #7e7d7d;
box-shadow: 0 1rem 2rem 0 rgba(0,0,0,0.2);
}
.dropdown-content a {
font-size: 1.5rem;
color: whitesmoke;
text-decoration: none;
text-align: left;
display: inline-block;
width: 17.5rem;
}
.dropdown-content a:hover {background-color: #7e7d7dd8; box-shadow: 1rem rgb(0,0,0); color: rgb(56, 182, 255);}
.dropdown:hover .dropdown-content{display: block;}
.sidebar {
position: fixed;
top: 17rem;
margin-left: 0.1%;
text-align: left;
}
.sidebaritem{
font-size: 1rem;
margin-top: 1rem;
margin-left: 0;
text-align: left;
}
h3 {
font-size: 1.5rem;
margin: 1rem auto;
}
#main {
position: relative;
top: 12rem;
width: 65%;
margin: inherit;
}
img {
width: 100%;
height: auto;
}
.row {
height: 20rem;
}
.column {
float: left;
width: 31%;
padding: 1%;
position: relative;
}
#bigtile {
width: 64%;
padding: 1%;
}
.container {
position: relative;
}
/* Things that apply to all tiles */
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: #38b6ff;
z-index: 17;
}
/* Style for tiles where pictures take up full tile */
.pic-tile {
border-top: 5px solid #38b6ff;
}
.pic-tile .container img {
height:100%;
width:100%;
}
.pic-tile .container h2{
position: absolute;
left: 2%;
bottom: 2rem;
z-index: 7;
}
.pic-tile .container h3 {
position: absolute;
left: 2%;
bottom: 0;
z-index: 7;
}
.pic-tile:hover .overlay {
opacity: 0.1;
}
/* Style for regular tiles */
.tile img {
height: 50%;
width: 100%;
top: 0;
}
.tile {
background-color: gray;
bottom: 1%;
text-align: end;
position: relative;
width: 100%;
height: 100%;
border-top: 5px solid #38b6ff;
}
.tile .container{
font-size: 1rem;
position: relative;
margin-bottom: 1%;
margin-left: 1%;
}
.tile .container p{
font-size: 1rem;
position: relative;
text-align: end;
color: whitesmoke;
}
.tile:hover .overlay {
opacity: 0.1;
}
<html>
<body>
<!-- <img> insert logo here -->
<header>
<nav class="navigation">
<ul>
<li class=dropdown>
Catagory1
<div class="dropdown-content">
content1
content2
content3
</div>
</li>
<li class="dropdown">
Catagory2
<div class="dropdown-content">
content4
content5
</div>
</li>
<li>Catagory3</li>
</ul>
</nav>
</header>
<div id="main">
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
I have been trying to align four images that are to be displayed as the pic below. But I have been getting spaces after each row. How can I remove them?
Also is there a way that I can add a small thumbnail of the example image in the middle where all four images meet?
Along with this I am also trying to add captions over the images. Currently they are displayed below the images. How can I add them over the images?
<!DOCTYPE html>
<html>
<body alink="ff0000" bgcolor="ffffff" link="0000ff" text="000000" vlink="800080">
<div>
<div class="transbox" style="width: 50%; height=50%; float: left;">
<img src="https://s22.postimg.org/61txkvgch/Venture_Capital.jpg" width="100%" />
<div style="position: relative; top:50%; left:45%; width:200px; height:25px">
<center>
<font color="Black" size="+2">Looking Into The Future</font>
</center>
</div>
<img src="https://s11.postimg.org/zf842w1mb/Real_Estate.jpg" width="100%" />
<div style=" text-align: center; vertical-align: middle;">
<center>
<font color="Black" size="+2">correct one</font>
</center>
</div>
</div>
</div>
<div>
<div class="transbox" style="width: 50%; height=50%; float: right;">
<img src="https://s18.postimg.org/acomst9gp/image.jpg" width="100%" />
<div style="position: relative; top:50%; left:45%; width:200px; height:25px">
<center>
<font color="Black" size="+2">Looking Into The Future</font>
</center>
</div>
<img src="https://s13.postimg.org/8yima8xvb/Construction.jpg" width="100%" />
<div style="position: relative; top:50%; left:45%; width:200px; height:25px">
<center>
<font color="Black" size="+2">Looking Into The Future</font>
</center>
</div>
</div>
</div>
</div></body>
</html>
JSFiddle link:
https://jsfiddle.net/8bL4qqr8/
body{
background-color:"ffffff";
}
.img-grid{
width: 50%;
float:left;
height:400px;
}
.img-grid img{
width :100%;
height:400px;
}
.caption{
display :none;
}
.img-grid:hover .caption{
text-align: center;
display:block;
background: #000;
color: #fff;
font-size:16px;
font-weight: bold;
margin-top: -100px;
padding: 10px;
}
<div class="transbox img-grid">
<img src="https://s22.postimg.org/61txkvgch/Venture_Capital.jpg" />
<div class="caption">
<p>Looking Into The Future</p>
</div>
</div>
<div class="transbox img-grid">
<img src="https://s11.postimg.org/zf842w1mb/Real_Estate.jpg" />
<div class="caption">
<p>Looking into the future</p>
</div>
</div>
<div class="transbox img-grid">
<img src="https://s18.postimg.org/acomst9gp/image.jpg" />
<div class="caption">
<p>Looking Into The Future</p>
</div>
</div>
<div class="transbox img-grid">
<img src="https://s13.postimg.org/8yima8xvb/Construction.jpg" />
<div class="caption">
<p>Looking Into The Future</p>
</div>
</div>
You have a lot of deprecated stuff in your HTML. Don't use all this link, text stuff in your body. And not <center> or <font> otherwise. I made a simple snippet of the stuff your wanted with flexbox. I modified your code a bit. You can find browser support for flexbox here: http://caniuse.com/#search=flexbox
body {
margin: 0;
padding: 0;
background-color: #FFFFFF;
}
* {
box-sizing: border-box;
}
.wrapper {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.transbox {
position: relative;
flex: 1 0 50%;
width: 50%;
margin: 0;
padding: 0;
}
.transbox .thumbnail {
display: block;
position: absolute;
width: 100px;
height: 75px;
}
.transbox:nth-of-type(1) .thumbnail {
bottom: 0;
right: 0;
}
.transbox:nth-of-type(2) .thumbnail {
bottom: 0;
left: 0;
}
.transbox:nth-of-type(3) .thumbnail {
top: 0;
right: 0;
}
.transbox:nth-of-type(4) .thumbnail {
top: 0;
left: 0;
}
.transbox img {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
float: left;
margin: 0;
padding: 0;
border: 0;
}
.transbox .text {
position: absolute;
width: 100%;
text-align: center;
color: #FFFFFF;
}
<div class="wrapper">
<div class="transbox">
<img src="https://s22.postimg.org/61txkvgch/Venture_Capital.jpg" />
<div class="thumbnail">
<img src="https://s22.postimg.org/61txkvgch/Venture_Capital.jpg" />
</div>
<div class="text">
<p>Looking Into The Future</p>
</div>
</div>
<div class="transbox">
<img src="https://s11.postimg.org/zf842w1mb/Real_Estate.jpg" />
<div class="thumbnail">
<img src="https://s11.postimg.org/zf842w1mb/Real_Estate.jpg" />
</div>
<div class="text">
<p>Looking into the future</p>
</div>
</div>
<div class="transbox">
<img src="https://s18.postimg.org/acomst9gp/image.jpg" />
<div class="thumbnail">
<img src="https://s18.postimg.org/acomst9gp/image.jpg" />
</div>
<div class="text">
<p>Looking Into The Future</p>
</div>
</div>
<div class="transbox">
<img src="https://s13.postimg.org/8yima8xvb/Construction.jpg" />
<div class="thumbnail">
<img src="https://s13.postimg.org/8yima8xvb/Construction.jpg" />
</div>
<div class="text">
<p>Looking Into The Future</p>
</div>
</div>
</div>
Hope this is what you were looking for
<!DOCTYPE html>
<html >
<head>
<style type="text/css">
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.item {
position: relative;
float: left;
border: 1px solid #333;
overflow: hidden;
width: 50%;
height: 50%
}
.item img {
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.item:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
h1 {
color: white;
margin: 0;
padding: 20px;
}
html, body { height: 100%; padding: 0; margin: 0; }
</style>
</head>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<div class="grow" style=" width: 40%; position: fixed; top: 50%; left: 50%; margin-top: -100px; margin-left: -10%;">
<div>
<img class=" align:center"; src="https://s14.postimg.org/6ufixiest/Logo.jpg" width="100%" />
</div>
</div>
<div class="item">
<img src="http://vindhyaassociates.com/wp-content/uploads/2016/09/IT-1.jpg" alt="pepsi">
<div class="item-overlay top"></div>
</div>
<div class="item">
<img src="http://vindhyaassociates.com/wp-content/uploads/2016/09/RealEstate1.jpg" alt="pepsi" >
<div class="item-overlay top"></div>
</div>
<div class="item">
<img src="http://vindhyaassociates.com/wp-content/uploads/2016/09/VentureCapital-1.jpg" alt="pepsi" >
<div class="item-overlay top"></div>
</div>
<div class="item">
<img src="http://vindhyaassociates.com/wp-content/uploads/2016/09/Construction-1.jpg" alt="pepsi" >
<div class="item-overlay top"></div>
</div>
<div style=" width: 20%; position: fixed; top: 25%; left: 25%; margin-top: -100px; margin-left: -10%;">
<div>
<h1 id="text">
Construction/Interior Design - Build to Live
</h1>
</div>
</div>
<div style=" width: 20%; position: fixed; top: 25%; left: 75%; margin-top: -100px; margin-left: -10%;">
<div>
<h1 id="text">
Real Estate - Buy and Sell Potential Properties
</h1>
</div>
</div>
<div style=" width: 20%; position: fixed; top: 75%; left: 25%; margin-top: -100px; margin-left: -10%;">
<div>
<h1 id="text">
Information Technology - Handling Potential IT Projects
</h1>
</div>
</div>
<div style=" width: 20%; position: fixed; top: 75%; left: 75%; margin-top: -100px; margin-left: -10%;">
<div>
<h1 id="text">
Venture Capital - Finance for High Growth Potential
</h1>
</div>
</div>
<div class="grow" style=" width: 20%; position: fixed; top: 50%; left: 50%; margin-top: -100px; margin-left: -10%;">
<div>
<img class=" align:center"; src="https://s14.postimg.org/6ufixiest/Logo.jpg" width="100%" />
</div>
</div>
</body>
</html>