Okay so I have been doing some renovations to my website and I am trying to make it so on the home page you see several images and what I want to happen is that when you hover over the image it blurs and and text appears in the center of the image. I've been able to make the images blur but the thing is is that all the tutorials and Q&A on Forums that I've found use absolute positioning.
When I do that though I end up with all the images stacked on top of each other. I then put divs around each image and made the images relatively positioned. The result was the same. I checked my code in validators and it came out with no errors. I could really need some help.
Here is my current setup (the images are where I want them and they blur on hover) https://jsfiddle.net/u9smc561/ Here is my HTML
<!-- title div -->
<div id="head">
<img src=http://www.mem3500films.minksfamily.com/pic/title.png alt="title" class="M35F">
</div>
<!-- menu bar line for anything bigger than 800px -->
<div class="menuBar line">
<img class='menu home' src=http://www.mem3500films.minksfamily.com/pic/home.png alt="Home" onclick="window.location='index.html';">
<img class="blank" src=http://www.mem3500films.minksfamily.com/pic/blank.png alt="b">
<img class='menu about' src=http://www.mem3500films.minksfamily.com/pic/about.jpg alt="About" onclick="window.location='About.html';">
<img class="blank" src=http://www.mem3500films.minksfamily.com/pic/blank.png alt="b">
<img class='menu comment' src=http://www.mem3500films.minksfamily.com/pic/comment.jpg alt="Comments" onclick="window.location='Comments.html';">
<img class="blank" src=http://www.mem3500films.minksfamily.com/pic/blank.png alt="b">
<img class='menu pic' src=http://www.mem3500films.minksfamily.com/pic/pic.png alt="Pictures" onclick="window.location='Pictures.html';">
<img class="blank" src=http://www.mem3500films.minksfamily.com/pic/blank.png alt="b">
<img class='menu active' src=http://www.mem3500films.minksfamily.com/pic/active.png alt="Activities" onclick="window.location='games.html';">
<img class="blank" src=http://www.mem3500films.minksfamily.com/pic/blank.png alt="b">
</div>
<!-- menu bar line for anything smaller than 800px -->
<div class="smenuBar" style="font-size: 2px;">
<nav>
<ul>
<li class="line">
<img class='menuPic menu' src=http://www.mem3500films.minksfamily.com/pic/mobileMenu.png alt="Menu">
<ul class="selector">
<li><img class='menu' src=http://www.mem3500films.minksfamily.com/pic/home.png alt="Home" onclick="window.location='index.html';"></li>
<li><img class='menu' src=http://www.mem3500films.minksfamily.com/pic/about.jpg alt="About" onclick="window.location='About.html';"></li>
<li><img class='menu' src=http://www.mem3500films.minksfamily.com/pic/comment.jpg alt="Comments" onclick="window.location='Comments.html';"></li>
<li><img class='menu' src=http://www.mem3500films.minksfamily.com/pic/pic.png alt="Pictures" onclick="window.location='Pictures.html';"></li>
<li><img class='menu' src=http://www.mem3500films.minksfamily.com/pic/active.png alt="Activities" onclick="window.location='games.html';"></li>
</ul>
</li>
<li class="close">
<img src=http://www.mem3500films.minksfamily.com/pic/close.png alt="Close" style="margin-top: 5px;">
</li>
</ul>
</nav>
</div>
<!-- Explanation area -->
<br>
<br>MEM 3500 Films is a collection of stop-motion animated videos.
<br>To learn more about MEM 3500 Films check out the About Page.
<br>Just click on the movie poster to go to that movies page where you can watch it.
<!-- main div section with the posters -->
<div style="margin-left:0%; margin-right:0%; width:100%; text-align:left;font-size: 25px">
<br>
<br>
<div class="left">
<img class="poster1" src=http://www.mem3500films.minksfamily.com/pic/tcb.png alt="The Coffee Break" />
<br>
<img class="poster1" src=http://www.mem3500films.minksfamily.com/pic/tvsr.png alt="tvsr" />
<br>
<img class="poster" src=http://www.mem3500films.minksfamily.com/pic/lt.james.png alt="Lt. James">
<br>
<img class="poster" src=http://www.mem3500films.minksfamily.com/pic/TRR.jpg alt="The robbers race">
<br>
<img class="poster" src=http://www.mem3500films.minksfamily.com/pic/TFP.jpg alt="The French Plane">
</div>
<div class="right">
<img class="poster1" src=http://www.mem3500films.minksfamily.com/pic/MKI6.png alt="MKI6" />
<br>
<img class="poster" src=http://www.mem3500films.minksfamily.com/pic/TPSPoster.png alt="tps">
<br>
<img class="poster1" src=http://www.mem3500films.minksfamily.com/pic/ag.jpg alt="The Air-to-Ground Attack">
<br>
<img class="poster" src=http://www.mem3500films.minksfamily.com/pic/tcp.jpg alt="The Counterfeiters">
<br>
<img class="poster" src=http://www.mem3500films.minksfamily.com/pic/mem3500films.jpg alt="mem 3500 films">
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<!-- footer credits -->
<div style="width:100%; text-align:center; font-size: 25px;">
<br>
<footer style="">LEGO, the LEGO logo, and the Minifigure are trademarks and/or copyrights of the LEGO Group. I am not supported by LEGO or in any way is this website. Check out the LEGO website for more cool stuff. <a href="http://www.lego.com/">LEGO.com</a>
<br>
<p style="margin: 0;">
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0; width:88px; height:31px; margin: 10px;" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" />
</a>
</p>
</footer>
</div>
And my CSS
/* makes the stuff for the tall posters */
.poster {
-webkit-transition: -webkit-filter 0.4s;
-moz-transition: -webkit-filter 0.4s;
-ms-transition: -webkit-filter 0.4s;
-o-transition: -webkit-filter 0.4s;
transition: -webkit-filter 0.4s;
width: 100%;
border-radius: 15px;
max-width: 450px;
max-height: 601px;
}
.poster:hover{
-webkit-filter: blur(7px);
filter: blur(7px);
}
/* makes the stuff for the wide posters */
.poster1 {
-webkit-transition: -webkit-filter 0.3s;
-moz-transition: -webkit-filter 0.3s;
-ms-transition: -webkit-filter 0.3s;
-o-transition: -webkit-filter 0.3s;
transition: -webkit-filter 0.3s;
width: 100%;
border-radius: 15px;
max-width: 450px;
max-height: 260px;
}
.poster1:hover{
-webkit-filter: blur(7px);
filter: blur(7px);
}
/* the main div holders for the posters */
.left {
width: 49%;
display: inline-block;
margin-left: 1px;
text-align: right;
}
.right {
width: 49%;
display: inline-block;
margin-right: 0px;
text-align: left;
}
/* the menu bar stuff */
@media only screen
and (min-width : 801px) {
.menuBar {
display: block;
}
.smenuBar, .close{
display: none;
}
/* makes sure the buttons are not to big */
.home {
width: 10.1%;
max-width: 107px;
}
.about {
width: 11.1%;
max-width: 117px;
}
.comment {
width: 16.7%;
max-width: 173px;
}
.pic {
width: 16.8%;
max-width: 174px;
}
.active {
width: 16.1%;
max-width: 167px;
}
.blank {
width: 1%;
max-width: 3px;
max-height: 25px;
margin-top: 10px;
margin-bottom: 10px;
}
/* makes the hover effect for the menu buttons */
.menu {
cursor: pointer;
margin-top: 10px;
margin-bottom: 10px;
-webkit-transition: -webkit-filter 0.5s; /* Safari */
-moz-transition: -webkit-filter 0.5s;
-ms-transition: -webkit-filter 0.5s;
-o-transition: -webkit-filter 0.5s;
transition: -webkit-filter 0.5s;
}
.menu:hover {
cursor: pointer;
margin-top: 10px;
margin-bottom: 10px;
-webkit-filter: invert(1); /* Safari */
-moz-filter: invert(1);
-ms-filter: invert(1);
-o-filter: invert(1);
filter: invert(1);
}
}
/* end of computer menu bar config */
/* start of mobile menu config */
@media only screen
and (max-width : 800px) {
/* stuff to make sure the other menu doesn't show */
.menuBar {
display: none;
}
.smenuBar, .close {
display: block;
}
.menuPic {
width: 90%;
max-width: 143px;
}
/* stuff to make sure there isn't indenting */
li {
list-style-type: none;
padding: 0;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
/* drop down part of the menu stuff */
nav ul ul {
height: 0px;
overflow: hidden;
-webkit-transition: height 0.5s; /* Safari */
-moz-transition: height 0.5s;
-ms-transition: height 0.5s;
-o-transition: height 0.5s;
transition: height 0.5s;
}
nav ul .line:hover > ul {
height: 335px;
}
nav ul .line:active > ul {
height: 335px;
}
nav ul .line:hover + .close {
height: 52px;
}
nav ul .line:active + .cose {
height: 52px;
}
.close {
text-align: center;
background:rgba(0,0,0,0.8);
height: 0px;
overflow: hidden;
-webkit-transition: all 0.5s; /* Safari */
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
/* makes the hover effect for the menu buttons */
.menu {
cursor: pointer;
margin-top: 10px;
margin-bottom: 10px;
-webkit-transition: -webkit-filter 0.5s; /* Safari */
-moz-transition: -webkit-filter 0.5s;
-ms-transition: -webkit-filter 0.5s;
-o-transition: -webkit-filter 0.5s;
transition: -webkit-filter 0.5s;
}
.menu:hover {
cursor: pointer;
margin-top: 10px;
margin-bottom: 10px;
-webkit-filter: invert(1); /* Safari */
-moz-filter: invert(1);
-ms-filter: invert(1);
-o-filter: invert(1);
filter: invert(1);
}
}
.selector {
width: 100%;
background-image:url('pic/wline.jpeg');
padding: 0;
}
/* end of menu config */
/* sets the body properties */
body {
background-image:url('http://www.mem3500films.minksfamily.com/pic/lego.jpeg');
background-color: #ffd700;
text-align:center;
font-size: 25px;
}
/* the title attributes */
body{margin:0;padding:0}
#head {
background-image:url('http://www.mem3500films.minksfamily.com/pic/lego1.jpeg');
background-repeat:repeat;
width: 100%;
}
/*the menu line div attributes */
body{margin:0;padding:0}
.line {
background-image:url('http://www.mem3500films.minksfamily.com/pic/line.jpeg');
background-repeat:repeat;
width: 100%;
}
/* makes sure that the website title is not to big */
.M35F {
width: 100%;
max-width: 905px;
margin-top: 20px;
margin-bottom: 20px;
}
/* makes sure links never get underlined */
a {
text-decoration:none;
}
/* gives the footer a background image */
footer {
background-image:url('pic/white.jpeg');
background-repeat:repeat;
text-align: left;
background-color: #FFFFFF;
color: #888888;
font-size: 25px;
}
In my current setup I have it so the images resize with the window then stop getting bigger at a certain size. This works fine now and I want it to be able to do this in the end.
But I have tried SOOOO many things to get this to work and spent hours (literally) but no matter what I've done it doesn't seem to work. Is what I am shooting for not even possible with CSS and HTML?
