I was trying to zoom in an image on hover, it's working fine. But when I added a text over the image it shows some gap at the bottom. I tried, but this gap doesn't remove at all
I tried with the margin, padding, but didn't work
.img-hover-zoom {
height: auto;
overflow: hidden;
position: relative;
display: inline-block;
}
.img-hover-zoom img {
transition: transform .5s ease;
}
.img-hover-zoom:hover img {
transform: scale(1.1);
}
.img-hover-zoom .text {
position: absolute;
padding-top: 15px;
padding-bottom: 15px;
left: 0px;
bottom: 0px;
margin: 0px auto;
text-align: center;
background: rgba(0, 0, 0, 0.5);
font-family: Quicksand;
color: #fff;
width: 100%;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="img-hover-zoom">
<img src="https://www.dike.lib.ia.us/images/sample-1.jpg" alt="Nature" style="width:100%;">
<p class="text">Nature<br />What a beautiful sunrise</p>
</div>
</body>
</html>
Just add display: block to your .img-hover-zoom img
.img-hover-zoom img {
display: block;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.img-hover-zoom {
height: auto;
overflow: hidden;
position: relative;
display: inline-block;
}
.img-hover-zoom img {
transition: transform .5s ease;
display: block;
}
.img-hover-zoom:hover img {
transform: scale(1.1);
}
.img-hover-zoom .text {
position: absolute;
padding-top: 15px;
padding-bottom: 15px;
left: 0px;
bottom: 0px;
margin: 0px auto;
text-align: center;
background: rgba(0, 0, 0, 0.5);
font-family: Quicksand;
color: #fff;
width: 100%;
}
</style>
</head>
<body>
<div class="img-hover-zoom">
<img src="https://www.dike.lib.ia.us/images/sample-1.jpg" alt="Nature" style="width:100%;">
<p class="text">Nature<br/>What a beautiful sunrise</p>
</div>
</body>
</html>
The gap or extra space under the image isn't a bug or issue, it is the default behaviour. Browsers compute their display property to inline but they give them a special behaviour which makes them closer to inline-block elements(as you can vertical align them, give them a height, top/bottom margin and padding, transforms ...).
By default, an image is rendered inline, like a letter.
The simple solution to this is to force the image to block display mode which also works to fix the above problem or apply vertical-align:bottom to img
.img-hover-zoom {
height: auto;
overflow:hidden;
position: relative;
display: inline-block;
}
.img-hover-zoom img {
transition: transform .5s ease;
display:block;
}
.img-hover-zoom:hover img {
transform: scale(1.1);
}
.img-hover-zoom .text{
position: absolute;
padding-top:15px;
padding-bottom:15px;
left: 0px;
bottom: 0px;
margin:0px auto;
text-align: center;
background: rgba(0, 0, 0, 0.5);
font-family: Quicksand;
color: #fff;
width: 100%;
}
<div class="img-hover-zoom">
<img src="https://www.dike.lib.ia.us/images/sample-1.jpg" alt="Nature" style="width:100%;">
<p class="text">Nature<br/>What a beautiful sunrise</p>
</div>
just make you image display ether table or block
add this css :
.img-hover-zoom img{
display: table;
}
see result :
.img-hover-zoom {
height: auto;
overflow: hidden;
position: relative;
display: inline-block;
}
.img-hover-zoom img {
transition: transform .5s ease;
}
.img-hover-zoom:hover img {
transform: scale(1.1);
}
.img-hover-zoom .text {
position: absolute;
padding-top: 15px;
padding-bottom: 15px;
left: 0px;
bottom: 0px;
margin: 0px auto;
text-align: center;
background: rgba(0, 0, 0, 0.5);
font-family: Quicksand;
color: #fff;
width: 100%;
}
.img-hover-zoom img{
display: table;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="img-hover-zoom">
<img src="https://www.dike.lib.ia.us/images/sample-1.jpg" alt="Nature" style="width:100%;">
<p class="text">Nature<br />What a beautiful sunrise</p>
</div>
</body>
</html>
Related
So pretty much I want to show text on what each of these images are when I hover over it. When you hover over it it should blur the image so you can see the text better. I am pretty new to html and couldn't figure this out on my own. -----------------------------------------------------------------------------------------------------------------------------
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-image: url('../Images/three.png') ;
width:100%;d
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
background-position: 0% 100%;
}
.coatofarms {
width: 5%;
z-index: 15;
position: absolute;
left: 0.5%;
top: -2%;
transition: all .1s ease-in-out;
}
.coatofarms:hover {
top: -1%;
transform: scale(1.0);
}
.topnav {
overflow: hidden;
background-color: #e1bc85;
position:absolute;
top: 0%;
width: 100%;
}
.topnav a {
float: left;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
margin-left: 10%;
font-family: Bodoni Mt;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #3a5063;
color: white;
}
table {
background-color:#3a5063;
width:100%;
position: absolute;
height: 1.5%;
top: 6.5%;
}
a.link:link {color:#000000;text-decoration:none;}
a.link:visited {color:#000000;text-decoration:none;}
a.link:hover {text-decoration:none;}
.giza {
transition: all .1s ease-in-out;
position: absolute;
top: 12%;
left:1%;
border-radius: 40%;
}
.giza:hover {
box-shadow: 0 0 0 10px #000000;
transition: .5s ease
}
/*-----------------------------------------*/
.luxor {
transition: all .1s ease-in-out;
position: absolute;
top: 16.2%;
left: 40%;
border-radius: 40%;
}
.luxor:hover {
box-shadow: 0 0 0 10px #000000;
transition: .5s ease
}
/*-----------------------------------------*/
.siwalandmark {
transition: all .1s ease-in-out;
position: absolute;
top: 10.4%;
right: 1%;
border-radius: 40%;
}
.siwalandmark:hover {
box-shadow: 0 0 0 10px #000000;
transition: .5s ease
}
/*-----------------------------------------*/
.abu {
transition: all .1s ease-in-out;
position: absolute;
right: 1%;
top: 56%;
border-radius: 40%;
}
.abu:hover {
box-shadow: 0 0 0 10px #000000;
transition: .5s ease
}
/*-----------------------------------------*/
.abydos {
transition: all .1s ease-in-out;
position: absolute;
top: 65%;
left: 40%;
border-radius: 40%;
}
.abydos:hover {
box-shadow: 0 0 0 10px #000000;
transition: .5s ease;
}
/*-----------------------------------------*/
.whitedesert {
transition: all .1s ease-in-out;
position: absolute;
top: 62%;
left: 1%;
border-radius: 40%;
}
.whitedesert:hover {
box-shadow: 0 0 0 10px #000000;
transition: .5s ease;
}
<!DOCTYPE html>
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght#300;500&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landmarks</title>
<link rel="icon" href="Images/flag.png">
<link rel="stylesheet" href="CSS/landmarks.css">
</head>
<body>
<div class="coatofarms"><img src="Images/coabetter.png" class="coa" width="75px" z-index="2"></div>
<div class="topnav">
Food
Landmarks
Visit Us
</div>
<img src="Images/giza.jpg" width="25%" class="giza" >
<img src="Images/luxorstemple.jpg" width="25%" class="luxor" >
<img src="Images/siwa.png" width="25%" class="siwalandmark">
<img src="Images/abu.jpg" alt="simbel" width="25%" class="abu" >
<img src="Images/abydos.jpeg" width="25%" class="abydos">
<img src="Images/whitedesert.jpg" width="25%" class="whitedesert">
<!--Table-->
<table>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</table>
</body>
</html>
There are several ways of doing it and you can do this clearly in pure CSS and HTML without Javascript.
First: blur image: (as seen in example in both images)
there is a CSS filter method filter: blur(5px);
That's it. Just as simple as that.
Second: add text with a Tooltip (as seen in the snippet on the first image)
You can just add the attribute title="tooltip text" and HTML includes a tooltip for you automatically with the text of the attribute. Hover with your cursor and wait a little
Third: make div with text visible on hover (as seen in snippet in second image)
you have to wrap the image and div tag into a sourrounding container and add CSS to it. So when you hover the container then you simply set the text-div to visible
.container {
position: relative;
text-align: center;
color: white;
width: 25%;
}
.blur_and_tooltop:hover {
filter: blur(5px);
-webkit-filter: blur(5px);
}
.text-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
visibility: hidden;
}
.container:hover .blur_and_visibility {
filter: blur(5px);
-webkit-filter: blur(5px);
}
.container:hover .text-box {
visibility: visible;
}
<!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">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="https://picsum.photos/id/1/200" alt="blur_and_tooltop" width="25%"
title="Just a normal HTML5 tooltip. No CSS needed" class="blur_and_tooltop">
<div class="container">
<img src="https://picsum.photos/id/15/200" alt="advanced pure CSS and HTML" width="100%" class="blur_and_visibility">
<div class="text-box">
<h3>I am some fancy TEXT</h3>
</div>
</div>
</body>
</html>
There's a few different ways of doing this through things like CSS, javascript/jQuery, or utilizing built in functions of a third party extension such as Bootstrap. The quickest would be to show the title attribute on hover.
Example HTML
<img src="https://cdn.theatlantic.com/media/mt/science/cat_caviar.jpg" title="Cat Caviar" />
i am working on chat application i want to make the button to be responsive for all the screen width below i added the code for the reference
Try shrinking the page width-wise and you'll see my issue. How can I keep the button size and position as close to the same as desktop as possible when resizing the screen? I'm stumped.
Pen: https://codepen.io/trjwaugh/pen/QWvypQJ
//FONTS
$heading-font: 'Roboto', sans-serif;
$main-font: 'Open Sans', sans-serif;
//COLORS
$btn-blue: #35A7FF;
* {
padding: 0;
margin: 0;
}
#header__chat {
position: absolute;
top: 30%;
left: 40%;
transform: translate(-50%, -50%);
width: 50vw;
max-width: 1000px;
display: flex;
padding: 20px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
border-radius: 50px;
animation: 5s;
}
#header__btn {
position: absolute;
top: 30%;
left: 72%;
transform: translate(-50%, -50%);
width: 6vw;
display: flex;
padding: 30px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
border-radius: 50px;
background-color: $btn-blue;
color: white;
align-items: center;
h2{
font-size: 2vw;
padding: 10px;
text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
text-transform: uppercase;
}
}
h1 {
font-size: 5vw;
font-family: $heading-font;
}
h2 {
font-size: 2vw;
font-family: $heading-font;
}
.typing {
width: 12ch;
animation: typing 2s steps(22), blink .5s step-end infinite alternate;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid;
}
#keyframes typing {
from {
width: 0
}
}
#keyframes blink {
50% {
border-color: transparent
}
}
<html lang="en">
<!--- Required Meta Tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Hello, I'm Tim. A Frontend Web Developer, always curious, learning and growing my skills in web design, data, analytics and software in general.">
<!--- CSS -->
<link rel="stylesheet" href="css/style.css">
<head>
<style>#import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto:wght#400;500;700&display=swap');</style>
</head>
<body>
<div id="header__chat">
<h1 class="typing">Text Goes Here.</h1>
</div>
<div id="header__btn">
<h2>Send</h2>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js" integrity="sha512-SttpKhJqONuBVxbRcuH0wezjuX+BoFoli0yPsnrAADcHsQMW8rkR84ItFHGIkPvhnlRnE2FaifDOUw+EltbuHg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="js/script.js"></script>
</body>
</html>
By using media queries adjust the padding , width, height of button according to screen size
#media only screen and (max-width: 600px) {
#header__btn {
position: absolute;
top: 30%;
left: 75%;
transform: translate(-50%, -50%);
background-color: #35A7FF;
color: white;
align-items: center;
width: 50px;
height: 30px;
padding: 25px;
border-radius: 50px;
}
}
please refer this w3 schools media queires to clearly understand what is media queries
here i attached the reference image on changing css
I am new html css,I am pretty confused with notification bar this should be responsive to adopt full screen when it is in mobile.But I tried it is not expanding .
But for me it is not working
HTML Markup
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/InterestPage.css">
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<header>
<div class="innerwrapper">
<h1>Feel Hunt</h1>
<div class="otherOptions">
<div class="notificationdiv">
<div class="notifyCoun">
<p>3</p>
</div>
<svg style="enable-background:new 0 0 48 48;" version="1.1" viewBox="0 0 48 48" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
.st0{display:none;}
.st1{fill:none;stroke:#303030;stroke-width:0.7;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st2{fill:#303030;}
</style><g class="st0" id="Padding__x26__Artboard"/><g id="Icons"><g><path class="st1" d="M12.44998,29.25c0.4714-1.86041,0.98683-3.71044,1.39399-5.58655 c0.20076-0.92508,0.37522-1.85624,0.50479-2.79409c0.12749-0.92277,0.12761-1.86938,0.32255-2.78069 c0.17715-0.82819,0.41986-1.62416,0.79385-2.38678c0.72808-1.48468,1.84795-2.76857,3.21698-3.69551 c1.54611-1.04685,3.39019-1.61638,5.25786-1.61638c2.6,0,4.96,1.06,6.66999,2.76999 c1.1685,1.1685,1.95078,2.64423,2.40368,4.22483c0.48483,1.69205,0.49984,3.44094,0.81387,5.16177 c0.41544,2.27656,1.13475,4.46739,1.71247,6.7034"/><path class="st1" d="M36.75998,35.78003H11.24002c-0.35004,0-0.60004-0.33002-0.5-0.67004L12.44998,29.25h23.09003 l1.71997,5.85999C37.36002,35.45001,37.11002,35.78003,36.75998,35.78003z"/><path class="st1" d="M22.39999,35.86509V36.32c0,0.71,0.58,1.29,1.29,1.29h0.93c0.71,0,1.29-0.58,1.29-1.29v-0.43993"/><path class="st1" d="M21.00458,13.27578c-1.74433,0.9948-3.03389,2.64047-3.76966,4.84763"/><line class="st1" x1="16.98094" x2="16.84722" y1="20.13664" y2="21.16766"/></g></g></svg>
//this is notifcation panel DIV
<div class="notificationPanel">
this should be full screen
</div>
</div>
<div class="profilePicDrop">
<img src="./img/sky-night-space-trees%20(4).jpeg" alt="">
<div class="getDisplayNone dropDown">
vdvdv
</div>
</div>
</div>
</div>
</header>
</body>
</html>
Homepage.scss
#import "utils/_reset";
#import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400');
#import "utils/_variables";
body{
background: #EEEEEE;
}
header{
width: 100%;
position: fixed;
height:50px;
top:0;
left:0;
right: 0;
background: #ffffff;
box-shadow: 0px 11px 32px -1px rgba(0,0,0,.04);
.innerwrapper{
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 75%;
margin: 0 auto;
}
h1{
color: #393e46;
font-family: $FontStyle;
text-transform: uppercase;
letter-spacing: 1.5px;
font-weight: 400;
a{
padding: 5px;
border: 1px solid #393e46;
text-decoration: none;
color: #393e46;
font-size: 13px;
transition: all 100ms ease-in-out;
&:hover{
background:#393e46 ;
color: #ffffff;
}
}
}
.otherOptions{
margin-left: auto;
display: flex;
align-items: center;
.profilePicDrop{
width: 25px;
height:25px;
position: relative;
margin-left: 12px;
img{
width: 25px;
height:25px;
border-radius: 50px;
}
.dropDown{
width: 150px;
height:150px;
background: #ffffff;
position: absolute;
right: 5px;
top:35px;
border-radius: 5px;
box-shadow: 0px 0px 17px 0px rgba(0,0,0,0.1);
}
}
}
}
.getDisplayNone{
display: none;
}
.getDropMenuIn{
animation: PopIn;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
.getOutDropMenu{
animation: PopOut;
animation-duration: .3s;
animation-fill-mode: forwards;
}
.notificationdiv{
margin-top: 5px;
position: relative;
svg{
width: 30px;
height:30px;
}
.notifyCoun{
position: absolute;
display: flex;
align-items: center;
justify-content: center;
background: #E74C3C;
width: 17.5px;
height:17.5px;
border-radius: 50px;
box-shadow: 0px 4px 14px 0px rgba(231,77,60,0.3);
p{
font-size: 12px;
font-family: $FontStyle;
color: #ffffff;
font-weight: 300;
}
}
&:hover{
cursor: pointer;
}
}
//this is notification panel css
.notificationPanel{
position: absolute;
top: 50px;
left: 0;
right: 0;
background: #ffffff;
width: 100%;
}
#keyframes PopIn {
from{
transform: scale(0.8);
opacity: 0.5;
transform-origin: 150px -5px;
}to{
transform: scale(1);
opacity: 1;
visibility: visible;
}
}
#keyframes PopOut {
from{
opacity: 1;
}to{
opacity: 0.1;
visibility: hidden;
transform: scale(0.5);
transform-origin: 150px -5px;
}
}
Try removing position: relative from your .notificationdiv. Because your absolute element will take 100% of his first relative parent.
https://codepen.io/OliviaPaquay/pen/mwbQEj Demo here, remove line 10.
I have an image description appear on hover. I make it transition up by changing the margin-top value. The problem is I want it to be able to take as much text as possible but still have everything appear over the image.
Here is a demo on JsBin.
.myslider{
overflow:hidden;
position: relative;
max-width:400px;
}
.myslider img{
width:100%;
}
.title{
position:absolute;
width: 100%;
height:20px;
padding-bottom: 2px;
margin-top: -20px;
transition: margin-top 200ms ease-in;
background:black;
opacity:0.6;
}
.title-text{
color:white;
float left;
padding-left:5px;
}
.nav-buttons{
background: white;
float:right;
padding: 0px 5px 0px 5px;
border: 1px solid black;
margin: 0px 5px 0px 0px;
cursor:pointer;
}
.myslider:hover .title{
margin-top: 0px
}
.description {
text-align: center;
position:absolute;
width: 100%;
margin-top:0px;
transition: margin-top 200ms ease-in;
color:white;
background:black;
opacity: 0.6;
}
.myslider:hover .description {
margin-top: -20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="myslider">
<div class="title">
<span class="title-text">Image 1 </span>
<span class= "nav-buttons"> > </span>
<span class= "nav-buttons"> < </span>
</div>
<img src="http://placekitten.com/400/400">
<div class="description">Image Caption: Should accept as much text as posisble. more text, more text, more text</div>
</div>
</body>
</html>
Instead of using margin-top to animate, use transform property to do it using something like this:
.description {
text-align: center;
position: absolute;
width: 100%;
transition: transform 200ms ease-in;
color: white;
background: black;
opacity: 0.6;
}
.myslider:hover .description {
transform: translate(0, -100%);
}
and there you go! Cheers!
.myslider {
overflow: hidden;
position: relative;
max-width: 400px;
}
.myslider img {
width: 100%;
display: block;
}
.title {
position: absolute;
width: 100%;
height: 20px;
padding-bottom: 2px;
margin-top: -20px;
transition: margin-top 200ms ease-in;
background: black;
opacity: 0.6;
}
.title-text {
color: white;
float left;
padding-left: 5px;
}
.nav-buttons {
background: white;
float: right;
padding: 0px 5px 0px 5px;
border: 1px solid black;
margin: 0px 5px 0px 0px;
cursor: pointer;
}
.myslider:hover .title {
margin-top: 0px
}
.description {
text-align: center;
position: absolute;
width: 100%;
transition: transform 200ms ease-in;
color: white;
background: black;
opacity: 0.6;
}
.myslider:hover .description {
transform: translate(0, -100%);
}
<div class="myslider">
<div class="title">
<span class="title-text">Image 1 </span>
<span class="nav-buttons"> > </span>
<span class="nav-buttons"> < </span>
</div>
<img src="http://placekitten.com/400/400">
<div class="description">Image Caption: Should accept as much text as posisble. more text, more text, more text</div>
</div>
Also made some minor changes:
Used < and > for correct XHTML syntax
Added display: block to the image to remove the small whitespace below the image.
Don't use margin-top. Use bottom to anchor it to the bottom its parent.
When I implemented the background in CSS, it covered the whole page but the length wasn't big enough to cover the content I wanted to write in it. I researched and found a background repeat-y, which I thought would copy the background again, making the page longer. When I code background-repeat: y; }
into CSS, it gives me the length I wanted, but splits the background so it doesn't cover the whole page. Most of it is white. What am I doing wrong? Thanks.
HTML:
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="aboutme.css">
<title>It's all about me!</title>
</head>
<body>
<div id="content">
<header>
<div class="grow">
<ul>
<li>Home</li>
<li>About me</li>
<li>What I love</li>
</ul>
</div>
</header>
<h1>About Me</h1>
<img src="ben.jpg" id="ben">
<b><h2>The beginning of coding:</h2></b>
<img src="runescape.jpg">
</div>
<p></p>
</body>
</html>
CSS:
body {
background-image: url(halftone.png);
background-repeat: repeat-y;
width: 1000px;
height: 4000px;
}
h1 { font-family: 'Lobster', cursive;
color: black;
position: absolute;
top: 25px;
left: 540px;
text-decoration: underline;
}
h2 {font-family: 'lobster', cursive;
color: black;
position: absolute;
top: 540px;
left: 480px;
text-decoration: underline;
}
p { font-family: 'Lobster', cursive;
font-size: 20px;
color: white;
position: absolute;
top: 300px;
left: 320px;
display: 0px auto;
}
#runescape {
position: absolute;
top: 500px;
}
#pagesize {
max-height: 10000px;
}
#ben {
position: absolute;
top: 130px;
left: 290px;
width: 700px;
height: 400px;
}
.grow {
position: absolute;
left: 550px;
top: 700px;
}
a {
color: black;
text-decoration: none;
font-weight: bold;
}
ul {
padding: 10px;
background: #dcf3ff;
border-width: 6px;
border-style: solid;
border-color: white;
}
li {
display: inline;
padding: 0px 15px 0px 15px;
border-right: 2px solid black;
border-left: 2px solid black;
}
#cameron {
position: absolute;
top: 285px;
left: 220px;
}
#pastcoding {
position: absolute;
top: 100px;
}
.grow {
display: inline-block;
-webkit-transition-duration: 0.7s;
transition-duration: 0.7s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow:hover {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
Try background-size:cover; to your body
Yeah background-size:cover; is a enough option. But may be it doesn't view your image completely as expected. Best option to accomplish your task is that the image should re-size proportional to your body size and use background-size: (width)px (height)px; in your body styling. But this is only applicable to fixed size body. Unless it won't be pretty. :-)
Try background-repeat: repeat; and min-height: 1080px; to body in css and change 1080px to as required to you.