I'm trying to use transition on an image. Here is what i'd like it to do. On hover, the image should increase in size to a width of 400 x 400px.
What I don't want it to do when it does transition is:
(1) affect any other element on the page.
(2) hide the image when it exceeds it's original size (where i'm having the overflow:hidden; issue.)
Here is my code taken into another document so I can work on it without looking at all the rest of the code.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<style>
#test img {width:358px;
height:298px;
transition: all 1s ease;
overflow: hidden;}
#test:hover img {width: 450px;
height:400px;}
</style>
<div id="test">
<img src="Portfolio/Hair_Salon/images/stylist1.png">
</div>
</body>
</html>
I figured it out as soon as i thought about what i was typing on here...
I needed to add one more identifier #test {width:358px, height:298px; overflow:hidden;}
You should put overflow:hidden, height, and width on #test. Then set your img width 100% to #test
Here's working example
#test {
width : 358px;
height : 298px;
overflow:hidden;
}
#test img {
width : 100%;
height : 100%;
transition: all 1s ease;
}
#test img:hover {
width: 450px;
height:400px;
}
<div id="test">
<img src="http://www.nzhistory.net.nz/files/hero_jean-batten-1934_1.jpg">
</div>
Here's the fiddle https://jsfiddle.net/mc6v6r71/
Related
I have a small div without text and when I hover over it, the text appears. When it appears I want a zoom animation to happen. The code I have is working fine on Chrome and Edge but on Firefox the zoom animation is not working, the first time the page loads.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#keyframes animatezoom{
0%{transform:scale(0);}
100%{transform:scale(1);}
}
.divClass{
background: lightblue;
height: 100px;
width: 100px;
}
.textClass{
display:none;
animation:animatezoom 0.6s;
}
.divClass:hover .textClass{
display:inline-block;
}
</style>
</head>
<body>
<div class="divClass">
<p class="textClass">Text</p>
</div>
</body>
</html>
I'm using Firefox Quantum 58.0.1
Here is a fiddle. (Make sure to click Run/Refresh after doing hover since the lack of animation only happens the first time the code runs)
You have to set animation on hover:
.textClass {
display: none;
}
.divClass:hover .textClass {
animation: animatezoom 0.6s;
display: inline-block;
}
I have two images with relevant paragraphs underneath them, which show perfectly on pc: ViewSiteHere - however the same page on mobile moves the images underneath each other, making the incorrect info display thereunder.
I have tried making each image only have a width of 49% but that just makes the images smaller and not next to one another
MobileTest
Thank you
According to the flow of the document, the current order of content is:
Image 1
Image 2
Description of image 1
Description of image 2
What you need to do is put "Image-1" and "description of image-1" in a <div> element. This will maintain the relationship between the text and image on mobile
The best approach to the images, both for accessibility that for responsive, would put one under the other. However, if you want you can do that use max-width/max-height and float and at hover the image enlarge.
You can use something similar to this:
body, html {
width: 100%;
height: 100%;
}
#media screen and (max-width: 800px) {
img {
max-width: 50%;
max-height: 50%;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
img:first-child {
float: left;
}
img:hover {
max-width: 100%;
max-height: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>TEST IMG</title>
</head>
<body>
<div class="wrap">
<img src="http://www.pepafrica.org/img/1.jpg" alt="">
<img src="http://www.pepafrica.org/img/1.jpg" alt="">
</div>
</body>
</html>
http://output.jsbin.com/fodehu
I have a problem with my website, I want to have a picture named banner.png in the header, I am supposed to use header and not div, since this is html5.
this is the index.html file
<!-- HTML 5 -->
<!DOCTYPE html>
<html>
<head>
<title>Erling's website</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<header>
</header>
<body>
</body>
</html>
This is the stylesheet
header {
background-image: url("img/banner.png");
background-repeat: no-repeat;
height: 15%;
position: absolute;
width: inherit;
}
I do find the picture when inspect element but it looks like the height is not working.
header {
/*DEMO*/background-color: red;
background-image: url("img/banner.png");
background-repeat: no-repeat;
height: 15%;
position: absolute;
width: inherit;
}
<!-- HTML 5 -->
<!DOCTYPE html>
<html>
<head>
<title>Erling's website</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<header>
</header>
<body>
</body>
</html>
Question to yourself: 15% of what?
If you use the developer tools of your browser and select the html or body tag from the opened window, you will see that the html and body do not have any height. 15% of 0 = 0, so the header must have a fixed height, for example: 230px, or you can add this style in your CSS file:
Html,body {position:relative;height:100%;}
For the above percentage height to work with your header add
html, body {
height: 100%;
}
Or change the height on the header to padding bottom.
header {
padding-bottom: 30%;
}
The above answer will solve the issue, but if you for any reason want to set the height as % in your header, you need to set the size of the html to 100% so that the header gets 15% of it.
html{
height:100%;
float:left;
}
When you say height: 15%;, You mean the header should take 15% of it's parent. This will have no effect since you haven't set the height of the parent which is the body. You either have to give the body height or else use pixels instead of percentage
header {
height:100px; /*You can specify your size*/
}
You can make use of view units, vh for view height and vw for view width JS Fiddle
header {
height: 15vh; /* represents 15% of the view height, 100vh is 100% of the height*/
I finally found a solution: note that also width was not working
header {
background-color: red; /* red for DEMO */
background-image: url("img/banner.png");
background-repeat: no-repeat;
height: 15%;
position: absolute;
width: inherit;
}
html, body {
height: 100%; /* fix height*/
width: 100%; /* fix width */
margin: 0; /* fix width, or margin: 0 -5px; in header {} */
}
<!-- HTML 5 -->
<!DOCTYPE html>
<html>
<head>
<title>Erling's website</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<header>
</header>
<body>
</body>
</html>
Another Post about this: Percentage Height HTML 5/CSS, it also mentions the use of height: 15vh;
<header> element position in html
It is invalid html to have a <header> element as a child of the <html> element. Your html is not valid accord to HTML5 specs.
You must move the <header> element to be inside the <body> element.
Part of what is happening here is that because the <header> element comes before the <body> element, the document model is forced to create a <body> element to contain <header> so your <body> element is being ignored.
Move your <header> tag to be within <body> and go from there.
Once that is fixed, then you can work on the sizing issue. Because the <body> element has nothing in it, the width will be 0. You can force it to fill the frame by giving body a width of 100% and your header image will work.
body {
width: 100%;
}
If you want the header to be 15% of the height of the visible window then change height to use the vh (viewport height) unit which is a percentage of the height of the visible window.
header {
[...]
height: 15vh;
}
Sorry if this has already been asked, but I wasn't sure of the correct wording, so I couldn't search it up. I have an image that is very large width-wise, and I want it to go off of the browser window when using a smaller resolution, and if you have a bigger resolution, it will show more of the image (width wise ONLY, height needs to remain the same), this way it won't matter what resolution you're browsing at, the image will still be the same height, so the page content will stay mostly the same. Just putting it in with img tags adjusts the whole picture to fit the browser window, changing the height in the process. Below is a very crude diagram of what I want to happen.
The simple option is to add overflow: hidden; to the image container. E.g. http://codepen.io/pageaffairs/pen/Etikh
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.wrap {width: 60%; margin: 0 auto; background: ##e7e7e7; padding: 20px;}
.container {overflow: hidden;}
</style>
</head>
<body>
<div class="wrap">
<div class="container">
<img src="http://placehold.it/1024X600" alt="">
</div>
</div>
</body>
</html>
Use this code:
CSS:
.container {
width:100%;
height:100%;
position:fixed !important;
top:0;
left:0;
background-color:red;
right:0;
bottom:0;
}
.container img {
height:inherit;
width:100%;
}
The container is fixed and it is 100% width and height with its top, left, right, bottom values all set to zero pixels. The img in the container inherits the height set in the container block but the width is 100%.
HTML:
<div class="container">
<img src="http://placehold.it/1024X768">
</div>
JsFiddle:
http://jsfiddle.net/CVNf9/
I think this is what you're looking for:
.image-mask {
margin: 10px;
border: dotted 2px red;
overflow: hidden;
}
.image-mask img {
display: block;
width:1024px;
height:768px;
}
<div class="image-mask">
<img src="http://yourdomain.com/images/yourimage.png">
</div>
If necessary set a max-width on .image-mask (say if it has an actual border you want to display or something) to prevent it getting larger than the image width, or set margin: 0 auto to center it, etc.
Fiddle: http://jsfiddle.net/Aj59Z/2/
As simple as that:
img {
width: 1000px; /* Width of your img */
height: 600px; /* Height of your img */
}
And to avoid horizontal scroll bar, wrap your image with some element and set its overflow attribute to hidden, width to 100%
JSFiddle
http://jsfiddle.net/SVxJ4/1/
I'm having a CSS problem in IE8. The full height of .test_div is not showing when I add an opacity in #header. But the full height of .test_div will show when I remove the opacity.
This works in Chrome and Firefox, but not in IE8. Am I doing something wrong?
Thank you!! :)
The code is also here:
http://jsfiddle.net/VPkXu/
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
</head>
<body>
<div id="header">
<div class="test_div">test square</div>
</div>
</body>
</html>
CSS:
#header {
position:absolute;
z-index:10;
height:100px;
width:300px;
background: #888;
/* remove the lines below, the full height of .test_div will be visible (IE8)*/
opacity: 0.7;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter:alpha(opacity=70);
}
.test_div {
background:#CCC;
height:500px;
width:200px;
}
easiest way would be to take out this div from inside of #header
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
</head>
<body>
<div id="header"></div>
<div class="test_div">test square</div>
</body>
</html>
and apply position and z-index to .test_div
.test_div {
z-index: 11;
position:absolute;
}
see http://jsfiddle.net/7aXJD/