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
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'm attempting my first web video project and am getting nowhere and need a little help with using a full width video header or background.
I found an example that does what I am trying to do using the below videos and it works just fine - no buffering, acceptable quality, etc.
The .mp4 file uses a 640x360 format # 23 fps (613kbps) and this works fine on any display I view it - the whole frame is visible top to bottom, side to side.
The research I've done indicates the best video format to use is 720 x 24fps, which I have tried (actual dimension is 1280x720) but found it only works well on less than maximized browser resolutions, in which case, it looks great, otherwise, a small portion of the bottom, maybe the bottom 18% of the frame, is not visible until you scroll down, which is unacceptable. I need the video to work as well as the 640x360 with the whole image visible. In addition, buffering occurs with the 720 format, whereas there is no buffering with the 640x360.
I am using Sony Vegas for the video editing and there is no option for a 640x360 format. The closest is 640x480 but that produces the same result - to tall and the bottom is not visible.
There is a site that uses the 1280x720 format successfully (http://mazwai.com/#/) but I have no idea how.
Can someone point me in the right direction?
Thank You.
This is the current code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Video test</title>
<script>
$(document).ready(function () {
$(".player").mb_YTPlayer();
});
</script>
<style>
body{ margin:0px; background:#000; max-width:1000; }
#bg_container{ height:800px; overflow:auto; }
#bg{ width:100%; }
</style>
</head>
<body>
<div id="bg_container">
<video id="bg" src="www.parishpc.com/images/720.mp4" autoplay loop muted"> </video>
</div>
</body>
</html>
This code worked a little bit better - only the bottom 5% was not visible:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Video test</title>
<style>
body, html { margin: auto;
background:#fff;
height: 100%;
}
header {
height:100%;
width:100%;
overflow:hidden;
position:relative;
}
.video {
position:fixed;
top: 50%; left: 50%;
z-index:1;
min-width: 100%;
min-height: 100%;
width:auto;
height:auto;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<header>
<video autoplay loop class="video">
<source src="www.parishpc.com/images/720.mp4" type="video/mp4">
</video>
</header>
</body>
</html>
If anyone is still trying to make the video take up the entire viewport, this can be done with the following code ->
(I am also fairly certain this requires you to add the video through your .html using the tag, instead of adding it as a background in your css properties)
Set your parent container you want to fill the video with to:
position: relative;
Add the following properties to your video:
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
z-index: -2;
object-fit: fill;
Try
body {
margin: 0;
padding:0;
}
and remove transform: translate(-50%,-50%); from video class
This should work
Let me know if you require any further help
I'm not sure exactly what you want, but having a video background without stretching or cut off parts is impossible to do while accommodating to every user's window size.
This solution will make sure the video is 100% of the window's height. If they want to see the cut off parts they'd have to resize their window to fit the width.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Video test</title>
<style>
body {
margin: 0;
padding: 0;
}
#container {
height: 100%;
width: auto;
}
.video {
height: 100%;
}
</style>
</head>
<body>
<div id="container">
<video autoplay loop class="video">
<source src="http://www.parishpc.com/images/720.mp4" type="video/mp4">
</video>
</div>
</body>
</html>
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/
I tend to do this every web site I design I do, but I have yet to actually find a real good way to do it. A company usually gives me their logo, I center it in the middle of the screen for when you go to the page, and then it auto forwards you to the home page. I can not seem to find a good way to center an image in the middle of the screen without a bunch of tables and divs! Any good suggestions?!
You could try using a div in your HTML like this:
<div id='dv'></div>
And using a background image like this:
#dv {
background: url('http://pieisgood.org/images/slice.jpg') no-repeat 0 0;
background-position: center;
}
html,body,#dv { /* so that the #dv can fill up the page */
width:100%;
height:100%;
}
Fiddle
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
}
<body>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRMtBiLioXqfhufpptex_ta8kGJa5UDQS3aITpBetR8EwH5GGDTJw" />
</body>
Related: Center a div
Personally, I like using the display: table-cell method.
For example, if my HTML is:
<div class="wrapper">
<img src="http://placehold.it/150x50" alt="Company ABC" />
</div>
Then my CSS should be:
div.wrapper {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 600px;
height: 200px;
}
If I'm unable to use the above method, another viable option is to use the line-height property.
HTML for line-height method:
<div class="wrapper">
<img src="http://placehold.it/150x50" alt="Company XYZ" />
</div>
CSS for line-height method:
img {
line-height: 300px;
}
You could use JavaScript to calculate the center point and position it with either margin or top (with position:relative/absolute), but this isn't really clean.
I'm assuming you're talking about a splash page, so here is a simple example (although in other circumstances I do not recommend modifying the body tag as I have done):
<!doctype html>
<html>
<head>
<title>blah</title>
<style type="text/css">
html,body {margin:0;padding:0;width:100%;height:100%;}
body {display:table;}
p {display:table-cell;text-align:center;vertical-align:middle;}
</style>
</head>
<body>
<p>Hello World - This could have an image in it</p>
</body>
</html>
The trick is in the CSS:
The item you wish to center both horizontally and vertically is displayed as a table cell: display:table-cell
The parent (container) of the item you wish to center is displayed as a table: display:table
Make sure the table display element is consuming the entire area which you would like to center against.
The item you wish to center must be told to align horizontally (text-align:center declaration) and vertically (vertical-align:middle declaration)
The text-align and vertical-align properties only work this special way because the element is displayed as a table-cell
You don't say if the image size is known.
There are a couple of ways to do this, I favour some CSS like so on an image with id="centreme" (if the image is 200x200) and a wrapper for the entire page
div#contentwrapper {
width:100%;
height:100%;
position:relative;
}
img#centreme {
position: relative;
width: 200px; /* the image width */
height: 200px; /* the image height */
top: 50%;
left: 50%;
margin-top: -100px; /* half the image height */
margin-left:-100px; /* half the image width */
}
fiddle for you to play with http://jsfiddle.net/7PYzB/2/
I'm not sure if I can do this, but this comes so close, I can't imagine it is impossible.
I'm aiming for a pure CSS/HTML solution.
I want two images with natively different heights to appear side by side with equal heights.
I want the left image to cover 60% of a div, the right image can have the remaining 40% (I know it will be less than 40% wide, but not its exact width).
The combo should appear in a div that covers 70% of the window width, regardless of the window size. Example of layout
Both images should retain their aspect ratio. Above left drawing shows a browser window with the unscaled images, the second is where the div covers about 60% of the window width, with the images showing in equal heights, and regardless of the browser window width, these percentages should remain unaltered, as I tried to show in the third and fourth diagram.
I've tried numerous variations, but often the right image wraps under the left one if the window becomes too small, or the images only scale with window height, which is definitely not what I want.
Here's a bare-bones example of my solution, using an embedded stylesheet:
<!DOCTYPE html>
<html>
<head>
<title>Stackoverflow Question</title>
<style>
div {
height: /*unfortunately cannot be a percentage*/ 200px;
width: 70%;
}
img.leftimage {
float: left;
width: 60%;
height: 100%;
}
img.rightimage {
float: right;
width: 40%;
height: 100%;
}
</style>
</head>
<body>
<div>
<img src="droids.jpg" class="rightimage" />
<img src="WinZip.png" class="leftimage" />
</div>
</body>
</html>
Here is a fiddle using colors instead of images, and if it matters these are the images I used above - clearly different height/width ratios:
Kitting the beg borrow and steal together, I get this working example:
<!DOCTYPE html>
<html>
<head>
<title>Stackoverflow Question</title>
<style type="text/css">
.aspectwrapper {
display: inline-block; /* shrink to fit */
width: 40%; /* whatever percentage of window's width you like */
position: relative; /* so .content can use position: absolute */
}
.aspectwrapper::after {
padding-top: 40%; /* play with this to fit both images in one line */
display: block;
content: '';
}
.content {
position: absolute;
top: 0; bottom: 0; right: 0; left: 0; /* follow the parent's edges */
outline: thin dashed green; /* just so you can see the box */
overflow: hidden;
}
.images {float: left;}
img {width: auto;height: 100%;}
</style>
</head>
<body>
<div class="aspectwrapper">
<div class="content">
<div class="images">
<img src="img1.jpg" />
<img src="img1.jpg" />
</div>
</div>
</div>
</body>
</html>