I've been testing my portfolio website (http://www.meades.org/Hazel-Portfolio/) on different browsers. The website landing page is designed for an image-specific caption to fade in and obscure the original image whenever the mouse hovers over the image. It seems to work on every browser I've tested so far except for Microsoft Edge. For some reason the blue caption block gets cut off at the bottom and inserted on top of the next image and I can't figure out why.
Here's the CSS I've applied to the images to get the effect:
.index-caption {
background-color: #75bff0;
color: black;
font-size: 16px;
padding-top: 25%;
opacity: 0;
transition: .5s ease;
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
text-align: center;
display: inline-block;
}
.index-caption:hover {
opacity: 1;
}
And here's an example of that class style being applied to the html (I'm using the Bootstrap .card-columns class to group the images):
<div class="card">
<a href="EMP.html">
<img size="100%" height="100%" class="card-img-top" src="images/emp.png" alt="Ethnomusicology Major Project">
<div class="index-caption">
<h2>The Ideology of the Modern Concert Hall</h2>
<br>
<h4>Last updated: 5/10/19</h4>
</div>
</a>
</div>
I've done some trial and error CSS editing and think the issue might be to do with how the transform and/or display values operate in Microsoft Edge, but I'm not sure and am pretty far out of my coding depth at this point. Does anyone know why it's not working and/or have any advice on how to fix it?
I believe you have hit this bug -> https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/107210
Just add overflow: hidden; to .card-columns .card to work around this.
Also, there is no need for the transform as you have width and height at 100%. You could just have:
top: 0;
left: 0;
and no transform.
Related
I need to create a "record store". I'm very new to CSS and HTML and hardly know anything in JAVA. This is what I need to create.
When the user hovers over one of these featured records, move that record vertically lower and make it become larger. Also, display information about that record that was not previously visible.
Any help is helpful.
Use :hover.
Regarding the information you want to display, you could put them in another div with display: none and change it to display: block on hover using something like #record:hover #content {}.
<div id="record"></div>
#record {
width: 100px;
height: 100px;
background: grey;
}
#record:hover {
position: relative;
top: 10px;
width: 110px;
height: 110px;
}
https://jsfiddle.net/y5j8rhfL/1/
Try this instead
<div class = "record" ></div>
Now the HTML is ready
.record{
/* Whatever style you've applied here is fine */
transition-duration: .5s;
}
.record:hover{
transform: translateY(15px) scale(1.5);
}
The translateY(15px) is to move it down by 15px
While the scale(1.5) is to make it appear bigger
I have a unique homework problem. I'm trying to replicate the layout I have here.
https://ibb.co/fYh6d3m
Inserting an image and centering it is easy enough, ditto for bg colour. However I'm at a loss on how to add the arrows next to the images.
The arrows do NOT have to take you to the next image, they are literally just meant to be interactivee buttons ( ie click on right arrow go to linked in, click on left go to fb, etc ) However this DOES have to be responsive.
The catch is, we can only use HTML and CSS ( Otherwise it would be too easy via Jquery )
Can anyone please help me out here? I've been trying to figure it out for the last 4 hours.
I've pasted some rough code below (please excuse the weird margins/padding on the .left, I was seeing if I could jury rig it in, but it didn't work) and I think I'm on the right track, but I can't seem to find a way to position the arrows on either side of image.
Thank you very much for any help, I appreciate it.
Tried using images, but was told we aren't allowed as they have to be interactive
Spent a good few hours researching, but without the correct terminology, I'm at a loss.
The margin and padding is way off on the .left because I was seeing if I could jury rig it using those, but it has to be responsive as well.
.image2 {
display: block;
margin-left: auto;
margin-right: auto;
}
i {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 15px;
}
.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.left {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
margin-top: -250px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
<section>
<img src="images/image2.jpg" class="image2">
<i class="arrow right"></i>
<i class="arrow left"></i>
</section>
I'm trying to get it to look like this
https://ibb.co/fYh6d3m
With the arrows being interactive via hover states/linking but NOT proceeding an image in a slideshow.
I'm building a very simple site using HTML and CSS. It consists of a headline, a paragraph of text, and an image.
When I view the site on Chrome, the placement of all three objects works perfectly. But in Firefox and Safari, they're scrambled. When I then optimize for one of those two, the Chrome version looks off. Etc.
Here's the CSS:
img {
position: fixed;
bottom: 280px;
right: 800px;
}
and the HTML:
<img src="bob.jpg" height="50%" width="20%">
Is there a relatively simple way to fix this? Can I specify the positioning depending on the browser -- something like so?
img {
position: fixed;
/* Chrome
bottom: 350px;
right: 925px;
/* Firefox
bottom: 200px;
right: 800px;
}
etc.
And a second question: What property can I assign the image so that text always wraps around the image, rather than rendering in front of or behind it?
Thank you!
If you want the image to be centered and aligned with the page's content, there is no need to add any additional CSS since you have text-align: center added to the body.
The image will be centered since it is an inline element. Also, your code has many issues, consider a simplified version:
body {
background-color: white;
text-align: center;
font-family: "Courier New", Courier, monospace;
}
p {
text-align: left;
font-size: 12px;
max-width: 50%;
margin: 0 auto;
}
hr {
width: 50%;
margin: 3em auto;
}
<div class="marquee">
<h3>THE X-FILES EPISODE GENERATOR</h3>
<hr>
<p>Make your own episode!</p>
<p>The X-Files generator mixes people, places and plots from different episodes to create new adventures.</p>
<hr>
<div class="wrap">
<button onclick="sentenceLoad()">Generate</button>
</div>
<div class="container">
<h5></h5>
</div>
<img src="https://bobbyfestgenerator.github.io/X.jpg" alt="">
</div>
Use CSS margin instead of repetitive <br> tags
No need to redefine the font since it is inherited from body
Add CSS rules to external file instead of inline (for <hr> for example)
Use margin: 0 auto to center block-level elements like <p>
jsFiddle: https://jsfiddle.net/azizn/d1xmv65m/
I want to add rounded corners to my images using CSS and also change the opacity on mouseover because this is cute. There's a bug: after mouseover, the image disappears.
The CSS is pretty simple:
.article img {
margin-bottom: 5px;
-moz-border-radius: 15px; /* for Firefox */
-webkit-border-radius: 15px; /* for Webkit-Browsers */
border-radius: 15px; /* regular */
}
.article:hover .img {
opacity: 0.8;
}
html also just for a test (this is first image that I have googled):
<li class="article">
<div class="img">
<a href="#">
<img src="http://i.telegraph.co.uk/multimedia/archive/02371/karen-ann-jones_2371086k.jpg" alt="Url">
</a>
</div>
</li>
You can see it on jsfiddle: http://jsfiddle.net/9DjLT/3/
Browser: ff19
I encountered this problem recently while trying to implement block-level links on my website, and I solved it by adding the following rule to the un-hovered img declaration:
border: 0.001em solid transparent;
A hack, to be sure, but it seems to work.
I think you have problem in css because of li:hover its taking 100% width. So till your mouse cursor on li your image effect by opacity. Just try below change in CSS
.img a:hover{
opacity: 0.8;
}
FWIW, I hit a similar problem in Chrome 38. In my case, I had a div with a border-radius value, and an image element with a transparency value, and the transparent image was hidden. To fix this, I added a non-1 opacity to the parent element (with the border-radius). Something like this:
.round_box {
border-radius: 5px;
opacity: 0.999999;
}
.transparent {
opacity: 0.6;
}
<div class="round_box">
<div class="transparent">
</div>
... Adding opacity: 0.999999; to the parent element made the transparent element display properly. I should note that I also have a lot of other interesting styles going on - drop shadows, column layout - but, maybe a similar hack will work for others.
Chrome and Safari are displaying a border around the image, but I don't want one. There is no border in Mozilla. I've looked through the CSS and HTML, and I can't find anything that is fixing it.
Here is the code:
<tr>
<td class="near">
<a href="../index.html"class="near_place">
<img class="related_photo" />
<h4 class="nearby"> adfadfad </h4>
<span class="related_info">asdfadfadfaf</span>
</a>
...
CSS:
a.near_place {
border: none;
background: #fff;
display: block;
}
a.near_place:hover{
background-color: #F5F5F5;
}
h4.nearby {
height: auto;
width: inherit;
margin-top: -2px;
margin-bottom: 3px;
font-size: 12px;
font-weight: normal;
color: #000;
display: inline;
}
img.related_photo {
width: 80px;
height: 60px;
border: none;
margin-right: 3px;
float: left;
overflow: hidden;
}
span.related_info {
width: inherit;
height: 48px;
font-size: 11px;
color: #666;
display: block;
}
td.near {
width: 25%;
height: 70px;
background: #FFF;
}
Sorry, I copied some old code before. Here is the code that is giving me trouble
Thanks in advance
Now I don't know if this is a bug with Chrome or not but the grey border appears when it can't find the image, the image url is broken or as in your case the src isn't there. If you give the image a proper URL and the browser finds it then the border goes away. If the image is to not have a src then you will need to remove the height and width.
sarcastyx is right, but if you want a workarround you can set the width and height to 0 and a padding to make space for your image.
If you want a icon of 36x36, you can set width and height to 0 and pading:18px
I know it is an old question. But another solution is to set the src to a 1x1 transparent pixel
<img class="related_photo"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
This works for me.
.related_photo {
content: '';
}
This may happen when the image is planted dynamically by css (e.g. by http://webcodertools.com/imagetobase64converter) in order to avoid extra HTTP requests. In this case we don't want to have a default image because of performance issues. I've solved it by switching from an img tag to a div tag.
img[src=""]{
content: "";
}
Lazy image solution (img loading="lazy")
If you are using lazy image loading you may notice this thin thin border before the image has loaded more than if you didn't.
You're more likely to see this for a horizontal scrolling gallery than a normal vertical scrolling webpage.
Why?
Lazy loading unfortunately only works on the vertical axis. I'm assuming this is because there's a high likelihood that you're going to scroll down, but not left to right. The whole point of lazy loading is to reduce images 'below the fold' from consuming unnecessary bandwidth.
Soution 1:
Detect when the user has scrolled (eg. using intersection observer) and then set loading="eager" on each image you want to immediately load.
I haven't actually tested this, and it's possible some browser's won't immediately load images - but it should be fine.
Solution 2:
Detect when the image has finished loading loaded and then fade it in.
img.setAttribute('imageLoaded', 'false');
img.onload = () =>
{
img.setAttribute('imageLoaded', 'true');
};
Then with css hide the image until it's loaded, after which it fades in nicely:
img
{
opacity: 1;
transition: opacity .5s;
}
img[imageLoaded='false']
{
opacity: 0; // hide image including gray outline
}
Also this behavior is subject to change, the browser may be clever enough to detect a horizontal scrolling element in future - but right now Chrome and Safari both seem to have a zero pixel window for looking for horizontal lazy images.
img.related_photo {
width: 80px;
height: 60px;
**border: solid thin #DFDFDF;** //just remove this line
margin-right: 3px;
float: left;
overflow: hidden;
}
Inside img.related_photo, you need to change border: solid thin #DFDFDF; to border: 0.
I have fixed this issue with:
<img src="img/1.jpg" style="height:150px; position: absolute; right: 15px;">
The right: 15px is where you want the image to be shown, but you can place it where you want.
I just added src="trans.png", trans.png is just a 100x100 transparent background png from photoshop.
Worked like a charm no borders
To summarise the answers given already: your options to remove the grey border from an img:not([src]), but still display an image using background-image in Chrome/Safari are:
Use a different tag that doesn't have this behaviour. (Thanks #Druvision) Eg: div or span. Sad face: it's not quite as semantic.
Use padding to define the dimensions. (Thanks #Gonzalo)Eg padding: 16px 10px 1px; replaces width:20px; height:17px; Sad face: dimensions and intentions aren't as obvious in the CSS, especially if it's not an even square like #Gonalo's example.