im having this issue.. keep in mind i'm no expert in CSS i just did my best i could to make a website for my company.
The problem is when i resize the site or view it on XAMPP with ipad its all overlaped!
i want it to stop moving and show scroll bars like normal site would not overlap content!
however when its full screen its fine its on my 1920x1080 monitor.
my CSS:
#charset "utf-8";
/* CSS Document */
body
{
height: 900px;
padding: 0;
margin: 0;
background-image: url(Images/bkg.jpg);
}
.header
{
position: absolute;
width: 100%;
height: 100px;
top: 0;
background-image: url(Images/header.jpg);
border-bottom: #CCC 2px solid;
box-shadow: 0px 0px 25px #F00;
}
.logo
{
position: absolute;
top: 70px;
left: 50%;
margin-left: -203px;
}
#dog
{
position: absolute;
right: 0px;
width: 244;
height: 500;
top: 15%;
}
.buttonholder
{
Width: 600px;
height: 150px;
position: fixed;
bottom: 0px;
left: 50%;
margin-left: -230px;
color: #FFF;
font-size: 18px;
}
#textholder
{
position: absolute;
left: 100px;
top: 35%;
font-size: 36px;
color: #FFF;
font-family: 'Tangerine', cursive;
width: 650px;
height: 300px;
}
#galleryholder
{
width: 460px;
height: 284px;
position: fixed;
left: 50%;
margin-left: -230px;
top: 50%;
margin-top: -145px;
border: #CCC 1px solid;
-moz-box-shadow: 0 0 25px 8px #000;
-webkit-box-shadow: 0 0 25px 8px#000;
box-shadow: 0 0 25px 8px #000;
overflow: auto;
}
/* gallery */
#s3slider
{
width: 500px;
/* important to be same as image width */
height: 300px;
/* important to be same as image height */
position: relative;
/* important */
overflow: hidden;
/* important */
margin-left: -40px;
margin-top: -16px;
}
#s3sliderContent
{
width: 500px;
/* important to be same as image width or wider */
position: absolute;
/* important */
top: 0;
/* important */
margin-left: 0;
/* important */;
}
.s3sliderImage
{
float: left;
/* important */
position: relative;
/* important */
display: none;
/* important */;
}
.s3sliderImage span
{
position: absolute;
/* important */
left: 0;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 474px;
background-color: #000;
filter: alpha(opacity=70);
/* here you can set the opacity of box with text */
-moz-opacity: 0.7;
/* here you can set the opacity of box with text */
-khtml-opacity: 0.7;
/* here you can set the opacity of box with text */
opacity: 0.7;
/* here you can set the opacity of box with text */
color: #fff;
display: none;
/* important */
top: 0;
/*
if you put top: 0; -> the box with text will be shown
at the top of the image
if you put bottom: 0; -> the box with text will be shown
at the bottom of the image
*/;
}
.clear
{
clear: both;
}
my HTML
<!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>
<link href='http://fonts.googleapis.com/css?family=Tangerine:400,700' rel='stylesheet' type='text/css'>
<script src="jquery/jquery.js" type="text/javascript"></script>
<script src="jquery/jquery.js" type="text/javascript"></script>
<script src="js/s3Slider.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Benčić Tartufi</title>
</head>
<body>
<div class="buttonholder">
<p style="float:left; margin-right:15px;">Kontakt / Contact</p>
<p style="float:left; margin-right:15px;">O nama / About Us</p>
<p>Proizvodi / Products</p>
<img src="Images/Separator.png" width="600px" height="77" style="margin-left:-70px; position:relative; bottom:30px;;" />
</div>
<div id="dog">
<img src="Images/dog.png" />
</div>
<div class="header">
</div>
<div class="logo">
<img src="Images/logo.png" />
</div>
<div id="textholder">
<p>"Iz Motovunske šume na Vaš stol, <br />
najbolji okus prirode, Tartuf."
</p>
<p>"From the Motovun woods to Your table,<br />
best taste of nature, the Truffle."
</p>
<img src="Images/Separator.png" width="550px" height="77px" style="position:relative; bottom:30px; margin-left:-75px;" />
</div>
<div id="galleryholder">
<!-- GALERIJA! DODAVAT SLIKE U IMG SRC SA SPANOM! -->
<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="Slike tartufa/1.jpg">
<span>Hello Truffles</span>
</li>
<li class="s3sliderImage">
<img src="Slike tartufa/2.jpg">
<span>Hello Truffles</span>
</li>
<!--Kopiraj si za novu sliku!! -->
<li class="s3sliderImage">
<img src="#">
<span>Hello Truffles</span>
</li>
<!--End-->
<div class="clear s3sliderImage"></div>
</ul>
</div>
<!--KRAJ GALERIJE!-->
<!--gallery holder div close-->
</div>
<!--end!-->
<script>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 3600
});
});
</script>
</body>
</html>
For what i see here you are mixing % and px in your widths and heights when you use % it will make the design fluid according the the width of the browser so remove all % and replace them with px. also I would recommend wrapping the your code in a
<div class="wrap">
.wrap{
marging: 0 auto;
width: 960px;
}
It is very hard for us to help you with this code, since we cant view the images you are using. if you upload it to a website then it would be a lot easier.
Related
I put an image in a div and somehow it's not part of the body thus made my footer unable to be at the bottom of the page. I read in here that i must make img position absolute, but it didn't change anything.
I just want my footer to be at the bottom of the page.
I tried to change the position of the image to be inside div and outside div, inside another div and so on, but still my footer wont go to the bottom.
.flex-container {
display: flex;
align-items: center;
}
.text-box {
padding-left: 55px;
font-size: 25px;
font-family: georgia;
padding-right: 50px;
}
.flex-container img {
position: absolute;
max-width: 100%;
height: auto;
}
.hedding-position {
padding-left: 10px;
}
.bakgrundsbilde {
background-image: url("https://wallpaperaccess.com/full/856733.jpg";); /*bilde fra google */
height: 675px;
width: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
html {
scroll-behavior: smooth;
}
footer {
line-height: 100px;
position: relative;
background: rgba(28, 32, 36, 1);
bottom: 0px;
width: 100%;
margin-left: 0;
margin-right: 0;
height: 100px;
text-align: center;
}
<!DOCTYPE html>
<html lang="no">
<head>
<title>Min website</title>
<link rel="stylesheet" href="css/meny.css">
<link rel="stylesheet" href="css/odin.css">
<link rel="shortcut icon" type="image/png" href="bilder/favicon.ico">
<style>
body {}
/*scrollbar utsene lånt ifra w3school. link: https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background-color: white;
}
::-webkit-scrollbar-thumb {
background-color: lightgray;
}
::-webkit-scrollbar-thumb:hover {
background-color: gray;
}
</style>
</head>
<body>
<!--bakgrundsbildet -->
<div class="bakgrundsbilde"></div>
<nav>
Hjem
Profil
Faginteresse
Hobby
Verk
Kontakt
<a style="float:right;" href="#bunn">Til bunnen</a>
</nav>
<br>
<!--skygen til bilde er tat ifra w3schools https://www.w3schools.com/css/css3_shadows_box.asp-->
<div class="flex-container">
<img style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);" src="bilder/chair.jpg" alt="Odin" align="right">
<div class="text-box">
<div class="hedding-position">
<h1 style="font-size: 50px; text-align: center; font-family: garamond;">Hei</h1>
</div>
<p>Jeg hetter Odin, jeg er student på informasjonsteknologi og mediaproduksjon. </p>
<p>Detter er min personlige website som inkludærer min profil, faginteresse, hobbyer, medier og kontakt. </p>
<p>Jeg bor på Sandnes her i Hadsel.</p>
<p>Jeg flyttet tilbake etter å ha bodd på Høle i noen år.</p>
</div>
</div>
<br>
<footer>
This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.
</footer>
<!-- <footer id="bunn">
<p> copyright 2023</p>
</footer> -->
</body>
</html>
Add bottom: 0; like this:
.flex-container img {
position: absolute;
bottom: 0; /* Added */
max-width: 100%;
height: auto;
}
EDIT
Of course, that didn't work. Looking at the accepted answer, I see that I wasn't even targeting the footer. When I was answering your question, I looked at the code and .flex-container img was the only one with position: absolute;. Consequently, I suggested that you add bottom: 0; to the .flex-container img.
You set position: relative; to the <footer> which will not push the footer to the bottom no matter what you do. So, set position: absolute; and bottom: 0; to the footer(!). Also, set position: relative; to the parent element.
try this code. regardless of the content, the footer must remain at the bottom
body {
padding:0;
margin: 0;
position: relative;
min-heigth: 100vh;
}
footer {
position: absolute;
background: rgba(28, 32, 36, 1);
bottom: 0px;
width: 100%;
margin-left: 0;
margin-right: 0;
text-align: center;
}
I'm developing a website only using HTML, CSS and Javascript, it is my first web page, and I'm getting a problem of the height on a fixed block. The "Contact us" link must open a box with the contact information in the center of the screen, so I used the fixed position, I wanted the height to work as usual, I mean only the height of it's content, but instead, it is showing 100% height of the screen, thank you, the web page is in Spanish, the link to the web site is:
http://www.bordadosyalgomas.com.ve/
Again, this is my first web page, plus I'm on the navigation bar by the time.
EDIT:
Sorry, first time asking, I didn't provide any code:
div#contacts1{
font-family: "Ubuntu Medium";
padding: 3.5em;
width: 50%;
border: solid 2px;
border-radius: 20px;
background-color: white;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
overflow: auto;
}
div#contacts{
width: 100%;
height: 4000px;
background-color: rgba(0,0,0,0.8);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
div#contacts1 img{
height: 60px;
display: inline-block;
vertical-align: middle;
}
div#contacts1 p{
font-size: 1.3em;
display: inline-block;
padding: 0;
margin: 0;
vertical-align: middle;
padding-left: 1.5em;
}
div#contacts1 p strong{
display: block;
font-size: 0.9em;
margin: 0;
margin-bottom: 0.2em;
padding: 0;
}
div.cparador{
height: 100px;
margin-bottom: -1em;
display: block;
}
div.cparador img{
-webkit-filter: drop-shadow(-2px 2px 4px black);
filter: drop-shadow(-2px 2px 4px black);
margin-left: 3em;
}
div.cparador h1{
text-align: center;
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Bordaos y algo mas</title>
<style type="text/css">
#import url("index.css") screen;
</style>
</head>
<body>
<div id="contacts">
</div>
<div id="contacts1">
<div class="cparador">
<h1>Información de contacto:</h1>
</div>
<div class="cparador">
<img src="contacts/phone.png">
<p><strong>Teléfono</strong>
0257-2535145</p>
</div>
<div class="cparador">
<img src="contacts/telegram.png">
<p><strong>Telegram</strong>
#bordados.ym</p>
</div>
<div class="cparador">
<img src="contacts/instagram.png">
<p><strong>Instagram</strong>
#bordados.ym</p>
</div>
<div class="cparador">
<img src="contacts/mail.png">
<p><strong>Correo Electrónico</strong>
bordados.ym#gmail.com</p>
</div>
<div class="cparador">
<img src="contacts/whats.png">
<p><strong>Whatsapp</strong>
0414-5214041</p>
</div>
</div>
</body>
</html>
A picture of the problem
You need to remove bottom:0; - this combined with top:0; causes the div to take 100% height.
Then you can set:
top: 50%; // move popup down by 50% of window height
transform: translateY(-50%); // move it back by 50% of popup height
EDIT:
also consider adding max-height: 100%; to make use of overflow: auto; when height of the window is shorter than popup's height.
There is a simple example of a Modal You can use, and instead of any extraa Custom CSS(Specially Height-Width) leave that simple.
that auto height according to your contents!
link- https://getbootstrap.com/docs/4.0/components/modal/
*I'm using Bootstrap CSS grid and reset for this exercise. I'm adding the contents in WordPress, using Gutenberg. Please bear with me, my explanation might be difficult to understand - English isn't my first language.
--
So I've created a container with two borders on top to create an upside-down pyramid. This shows the previous container's background colour and image. I've also added an image with a diagonal gradient within the parent container as shown below:
/*------------------------------------*\
MAIN
\*------------------------------------*/
.header {
position: relative;
background: #2f2655;
height: 500px;
}
.header:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.1);
}
.header .logo {
text-align: center;
position: absolute;
left: 0;
bottom: 30px;
width: 100%;
padding: 20px 0;
z-index: 5;
}
.header .logo a {
display: inline-block;
margin: 0 auto;
text-decoration: none;
}
.header .logo a h1 {
color: #fff;
}
.section {
position: relative;
overflow: hidden;
margin-top: -20px;
padding-top: 20px;
}
.section .surround {
position: relative;
padding-bottom: 40px;
}
.section .surround:before {
content: "";
position: absolute;
left: -8px;
width: 10%;
height: 20px;
top: -20px;
background-color: #fff;
-webkit-transform: skew(40deg);
-moz-transform: skew(40deg);
-o-transform: skew(40deg);
-ms-transform: skew(40deg);
transform: skew(40deg);
z-index: 5;
}
.section .surround:after {
content: "";
position: absolute;
right: -8px;
width: 90%;
height: 20px;
top: -20px;
background-color: #fff;
-webkit-transform: skew(-40deg);
-moz-transform: skew(-40deg);
-o-transform: skew(-40deg);
-ms-transform: skew(-40deg);
transform: skew(-40deg);
z-index: 5;
}
.section.blue-wrapper:before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background-image: url(https://i.imgur.com/nnHq6IP.png);
background-repeat: no-repeat;
background-position: top right;
z-index: 5;
}
.section.blue-wrapper .surround *:not(.btn-white) {
color: #fff;
}
.section.blue-wrapper .surround,
.section.blue-wrapper .surround:before,
.section.blue-wrapper .surround:after {
background-color: #00aeef;
z-index: 4;
}
.section.grey-wrapper .surround,
.section.grey-wrapper .surround:before,
.section.grey-wrapper .surround:after {
background-color: #e1e1e1;
}
.section .content {
text-align: center;
position: relative;
padding: 20px 0;
}
.section.grey-wrapper .section-title {
color: #777;
}
/*------------------------------------*\
MISC
\*------------------------------------*/
*.btn-white {
color: #fff;
margin: 1rem 0;
padding: 0.6rem 2.3rem;
background: none;
display: inline-block;
border: 1px solid #fff;
border-radius: 20px;
text-decoration: none;
transition: all 0.1s linear;
}
*.btn-white:hover {
text-decoration: none;
background: #fff;
color: #0e0048;
}
<!doctype html>
<html lang="en-GB" class="no-js">
<head>
<meta charset="UTF-8">
<title>
<?php wp_title(''); ?>
<?php if(wp_title('', false)) { echo ' :'; } ?>
<?php bloginfo('name'); ?>
</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
</head>
<body class="home">
<div id="mm-page">
<!-- header -->
<header class="header" role="banner" style="height: 200px;">
<div class="header-items">
<!-- logo -->
<div class="logo">
<a href="#">
<h1>Logo</h1>
</a>
</div>
<!-- /logo -->
</div>
</header>
<!-- /header -->
<div class="section blue-wrapper">
<div class="surround">
<div class="container">
<div class="row">
<div class="col-12">
<article class="content">
<h2 class="section-title">Coloured Wrapper</h2>
<p>This is a sample text.</p>
<a class="btn-white" href="#">Button</a>
</article>
</div>
</div>
</div>
</div>
</div>
<div class="section grey-wrapper">
<div class="surround">
<div class="container">
<div class="row">
<div class="col-12">
<section class="content">
<h2 class="section-title" style="margin-bottom: 0;">Grey</h2>
</section>
</div>
</div>
</div>
</div>
</div>
My problem is: anything beneath the ::before element are unclickable. Are there any other ways I could code this while keeping the design?
Solutions I've tried:
Give ::before a set width of 380px, but this only fixes my problem for bigger screens.
Add the background-image within the section class instead. But the top-right border overlapping the background-image instead - not my desired result.
Use the property pointer-events: none on the ::before element.
Thank you arieljuod. This question is now answered.
I've added pointer-events: none inside ::before element.
So I was wondering how can I make the box stops exactly before it go through the text. The box is just floating under the text, I want to make it stop floating before it hits.
Normal Size
Window resized
HTML:
<div class="program"></div>
<span class="but">
<h2 class="zaglavie">CSGOFREEITEMS <span class="beta">0.5.1</span></h2>
<p class="opisanie"><b>Ultimate platform</b>. The easiest way to have fancy inventory. Get the item you want just in <b>seconds</b>.</p>
<div class="buttons">
<a class="button1" href="#above"></a>
<a class="button2" href="#above"></a>
<span style="float: right; color: white; margin-right: 2px; margin-top: 1px; font-size: 10.5px;">for only <b>$4.99</b>/month</span>
</div>
</span>
<br>
CSS:
.but
{
position: absolute;
top: 90px;
font-family: Verdana;
display: block;
}
.zaglavie
{
font-family: 'Open Sans', sans-serif;
color: #e5e5e5;
font-size: 31px;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.39);
position: relative;
left: 70px;
top: 100px;
font-weight: 700;
}
.opisanie
{
font-family: 'Open Sans', sans-serif;
color: #fefefe;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.39);
font-size: 16px;
left: 70px;
top: 90px;
position: relative;
width: 400px;
}
.buttons
{
margin-left: 70px;
margin-top: 120px;
width: 375px;
height: 57px;
}
.button1
{
display:block;
width: 227px;
height: 57px;
background-image: url(images/button1.png);
background-repeat: no-repeat;
float: left;
}
.button2
{
display:block;
width: 136px;
height: 57px;
background-image: url(images/button2.png);
margin-left: 240px;
}
.program
{
display:block;
width: 665px;
height: 745px;
background-image: url(images/sosi2.png);
background-repeat: no-repeat;
right: 50px;
position: relative;
float: right;
}
Weave: http://kodeweave.sourceforge.net/editor/#4fc7d9522497eba555377ed94d364ee3
CSS Media Queries are a good solution for your problem.
I made a simple snippet here to show you how they work. You can utilize them with your site to fix the problem.
What I decided to do here is use display: table; and table-cell to center your elements.
I then used media queries to change the element from display: table; to display: block;
In addition I change your program background image to an image element as it's easier to style and handle upon page resize.
I converted your images to Base64 aka DataURL (because I'm on a tablet and it's easier to test without extra http requests.
Here's a very simple example of how you can solve your problem with media queries
You can view this weave for a more extensive solution (ex display: table; and table-cell).
.left, .right {
position: absolute;
top: 0;
bottom: 0;
padding: 1em;
}
.left {
left: 0;
right: 50%;
background: #93e9ff;
}
.right {
right: 0;
left: 50%;
background: #47ffaf;
}
#media all and (min-height: 300px) {
.left, .right {
position: absolute;
left: 0;
right: 0;
}
.left {
top: 0;
bottom: 50%;
}
.right {
bottom: 0;
top: 50%;
}
}
<div class="left">left content</div>
<div class="right">right content</div>
You can use Bootstrap and you will have a nice responsive design for your page.
This is your code with bootstrap, without css and using the images in the HTML section:
<!Doctype html>
<html>
<head>
<meta charset ="utf-8">
<!--Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<!--you can change that numbers to adapt your page to another devices like tablets-->
<!--if you see, the numbers are a proportion of 12, in this case, 5:7 (check the last div)-->
<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
<span class="but">
<h2 class="zaglavie">CSGOFREEITEMS <span class="beta">0.5.1</span></h2>
<p class="opisanie"><b>Ultimate platform</b>. The easiest way to have fancy inventory. Get the item you want just in <b>seconds</b>.</p>
<div class="buttons">
<a class="button1" href="#above"><img src="images/button1.png"></a>
<a class="button2" href="#above"><img src="images/button2.png"></a>
<span style="float: right; color: white; margin-right: 2px; margin-top: 1px; font-size: 10.5px;">for only <b>$4.99</b>/month</span>
</div>
</span>
</div>
<!--if you see, the numbers are a proportion of 12, in this case, 5:7-->
<div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">
<img class="img-responsive" src="images/sosi2.png">
</div>
</div> <!-- end row -->
</div> <!-- end container-fluid -->
</body>
You can implement your css from here and you will see that will be more easy and solid.
See http://getbootstrap.com/components/
Or https://www.youtube.com/watch?v=3cYWiU_HsgM (a nice tutorial of Bootstrap 3)
Hope this helps.
I am currently trying to learn CSS3 techniques to implement on my website. I found this code online for sliding image boxes (http://www.pixelforlife.com/html-css3-sliding-image-boxes/). When you hover over the boxes, its supposed to move upwards revealing the text hidden behind it. The problem is when I run it on chrome, firefox or IE the smooth transition effect doesn't work. I tried to change the webkit values and stuff but still couldn't get it to work. Any help would be greatly appreciated.
Thanks
<!doctype html>
<html lang="en">
<head>
<title> www.PixelForLife.com - Sliding Block </title>
<style type="text/css">
body { font: 13px sans-serif; }
#montage-wrap { width: 820px; height: 200px; }
.montage-block { width: 200px; height: 200px; float: left; display: block; overflow: hidden; position: relative;
margin: 0 4px 0 0; background: white; border: 1px solid #666;}
.montage-block:last-child { margin: 0; } /* removes margin on last block */
#block1 { width: 200px; height: 200px; position: absolute; display: block;
background: url("pixelforlife_thumb.png") no-repeat;
-webkit-transition: top .3s ease-in-out; }
.montage-block:hover #block1 { top: -150px; }
.thumb_content { padding: 70px 15px 0 15px; color: #777; }
.thumb_content h1 { margin: 0 0 5px 0; color: #666; font-size: 14px; }
</style>
</head>
<body>
<div id="montage-wrap">
<div class="montage-block">
<span id="block1"></span>
<div class="thumb_content">
<h1>Sample Title</h1>
<p>This is some sample title. yay for text.</p>
</div>
</div> <!-- block end -->
<!-- A sample Block -->
<div class="montage-block">
<span id="block1"></span>
<div class="thumb_content">
<h1>Sample Title</h1>
<p>This is some sample title. yay for text.</p>
</div>
</div> <!-- block end -->
</div> <!-- montage wrap -->
</body>
</html>
i changed the css position: top to margin:top
Its worked for me
#block1 {
width: 200px;
height: 200px;
position: absolute;
transition: all 0.5s ease-in-out;
}
.montage-block:hover #block1 {
margin-top: -100px;
}
Demo
probably this is the one you wanted
DEMO HERE
#block1 {
background: url("pixelforlife_thumb.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
display: block;
height: 200px;
position: absolute;
top: 0;
transition-delay: 0.5s;
transition-duration: 1.5s;
transition-property: top;
width: 200px;
}
and on hover
#block1:hover {
top: -150px ;
}
don't use same id on same page. an ID is unique per page.
You have 2 span with the same id :
<span id="block1"></span>
Change id="block1" to class="block1" and don't forget to change it in your css too.