I have the following code -
render() {
return <DeviceThemeProvider><GlobalStyle /><div>
<div class="grids">
<div id="grid">
<div class="grid-element">
<img class="displayed" src={process.env.PUBLIC_URL + '/img/692.png'} />
</div>
Now I would like to replace the image 692.png with 693.png.
I understand how to do with setState/src. But how to do it with some effect? Fade out/fade in? I found CSS transition property. Could it be used with React somehow?
What if I need to replace it with no image and replace no image with 692.png?
As far as I understand, majority of the browsers supports:
.cat {
width: 500px;
height: 500px;
transition: background 1s;
}
https://jsfiddle.net/6jwqkes3/1/
! But this is not included in the standard.
Thanks to #TusharShahi I used http://reactcommunity.org/react-transition-group/switch-transition library.
Related
i'm new to ReactJs and my question may seem stupid to many of you, but i have a problem with setting the background. My React code is:
<header className="masthead ttt">
<div className="overlay"></div>
<div className="container">
<div className="row">
<div className="col-lg-8 col-md-10 mx-auto">
<div className="site-heading">
<h1>Blog Name</h1>
<span className="subheading">blablablablabla</span>
</div>
</div>
</div>
</div>
</header>
So basically i'm trying to set an image as background in my header , so i created a class .ttt and modified it to my css that way :
.ttt{
background-image: url("../img/home-bg.jpg");
}
And finally here's the way the folders are set :
Am i doing anything wrong in my code ? Or there's another way of doing things in ReactJS!
Thanks!
So far what I understood from your problem is that you are not getting the image on the front-end. While checking it through developer options it must be pointing you to a blank div at the top of the screen.
If that's the case then it is because that every background image needs some size to be displayed.
You can either give width and height or you can give background-size property as follows:
.ttt{
background-image: url("../img/home-bg.jpg");
width: 100%;
height: 100%; // giving height is not compulsary but just for good practice.
}
OR
.ttt{
background-image: url("../img/home-bg.jpg");
background-size: 100% 100%; // First value: {Width} Second value: {Height}
}
This would resolve your issue.
Use inline css in javascript like this:
import Background from '../img/home-bg.jpg'; // make sure path is correct
<header className="masthead" style={{ backgroundImage: `url(${Background})` }} >
ref Be mindful of using backgroundImage instead of background-image
Working for me
<div className="drag-dashboard" style={{ backgroundImage: `url(${config.DESTINATION_MEDIA_CDN+ "assets/icons_skining/upload_placeholder_skining.png"})`}}>
</div>
I am creating an email flyer and I have multiple images that I want at 140px by 140px but some are originally 300x300 or 400x400. I don't want to go resize each image as there can be quite a few and the flyer will be a weekly update so is it possible to use CSS to tell all images (or images that have classes) to resize to 140px?
I was going to post some code but it's quite a vague request so there no relevant code I can show to help my question.
maybe if I <span>...</span> and then give the span a class, would it be possible this way?
if your markup is for a newsletter you may force dimensions both with style attribute and with inline width and height attribute, e.g.
<img src="..." style="width:140px; height:140px" width="140" height="140" />
but, anyway, I strongly suggest to perform some kind of batch task for automatic resize of the images (e.g. using GruntJS), so you could save some precious bandwidth on the server in which you store your static assets. (conversely, if you embed images into the email, users will appreciate a lighter size)
Yeah add class to span and then:
span.yourclass img {
width: 140px;
}
I think I might be understanding this, but some simple css should work :
css :
img.small {
width: 140px;
height: 140px;
}
OR if you want to do all img's under a specific element :
.thumbs img {
width: 140px;
height: 140px;
}
html :
<img src="pic.jpg" class="small">
<div class="thumbs">
<img src="pic.jpg">
<img src="pic.jpg">
<img src="pic.jpg">
</div>
Or if they are dynamically generated, you can eliminate the css and just go :
<img src="pic.jpg" width="140" height="140">
You can set width and height for all images. Add "max" keyword to be sure.
img{
max-width:140px !important;
max-height:140px !important;
}
If you simply want ALL images on the page to resize, add the following into your CSS:
img{ width: 140px; }
This will proportionally set the height/width and I'm assuming all you images are square ?
If not, add 'height: 140px' but this will distort an image that isn't square.
wrap your images with div.class then write a single css to resize all the images which are wrapped by that div
MARK-UP::
<div class="imageWrapper">
<img src="/path/to" />
<img src="/path/to" />
<img src="/path/to" />
</div>
CSS::
.imageWrapper{
overflow:hidden;
}
.imageWrapper img{
width:400px;
height:400px;
}
I have a few images on my page. I'm finding that the page starts to render before the images have been loading (which is good), but that the visual effect is not great. Initially the user sees this:
--------hr--------
text
Then a few milliseconds later the page jumps to show this:
--------hr--------
[ ]
[ image ]
[ ]
text
Is there a simple way that I can show a grey background image of exactly the width and height that the image will occupy, until the image itself loads?
The complicating factor is that I don't know the height and width of the images in advance: they are responsive, and just set to width: 100% of the containing div. This is the HTML/CSS:
<div class="thumbnail">
<img src="myimage.jpeg" />
<div class="caption">caption</div>
</div>
img { width: 100% }
Here's a JSFiddle to illustrate the basic problem: http://jsfiddle.net/X8rTB/3/
I've looked into things like LazyLoad, but I can't help feeling there must be a simpler, non-JS answer. Or is the fact that I don't know the height of the image in advance an insurmountable problem? I do know the aspect ratio of the images.
Instead of referencing the image directly, stick it within a DIV, like the following:
<div class="placeholder">
<div class="myimage" style="background-image: url({somedynamicimageurl})"><img /></div>
</div>
Then in your CSS:
.placeholder {
width: 300;
height: 300;
background-repeat: no-repeat;
background-size: contain;
background-image: url('my_placeholder.png');
}
Keep in mind - the previous answers that recommend using a div background approach will change the semantic of your image by turning it from an img into a div background. This will result in things like no indexing of these images by a search crawler, delay in loading of these images by the browser (unless you explicitly preload them), etc.
A solution to this issue (while not using the div background approach) is to have a wrapper div to your image and add padding-top to it based on the aspect ratio of the image that you need to know in advance. The below code will work for an image with an aspect ratio of 2:1 (height is 50% of width).
<div style="width:100%;height:0; padding-top:50%;position:relative;">
<img src="<imgUrl>" style="position:absolute; top:0; left:0; width:100%;">
</div>
Of course - the major disadvantage of this approach is that you need to know the aspect ratio of the image in advance.
There is a really simple thing to check before you start looking into lazy-loading and other JavaScript. Make sure the JPEG images you are loading are saved with the 'progressive' option enabled!
This will cause them to load the image iteratively, starting with a placeholder that is low-resolution and faster to download, rather than waiting for the highest resolution data before rendering.
It's very simple...
This scenario allows to load a profile photo that defaults to a placeholder image.
You could load multi CSS background-image into an element. When an avatar photo fails, the placeholder image appears default of div.
If you're using a div element that loads via a CSS background-image, you could use this style:
#avatarImage {
background-image: url("place-holder-image.png"), url("avatar-image.png");
}
<div id="avatarImage"></div>
Feel free to copy this:
<script>
window.addEventListener("load", function () {
document.getElementById('image').style.backgroundColor = 'transparent';
});
</script>
<body>
<image src="example.example.example" alt="example" id="image" style="background-color:blue;">
</body>
I got this from here: Preloader keeps on loading and doesnt disappear when the content is loaded.
Apart from all solutions already mentioned, the last solution would be to hide the document until everything is loaded.
window.addEventListener('load', (e) => {
document.body.classList.add('loaded');
});
body {
opacity: 0;
}
body.loaded {
opacity: 1;
}
<div id="sidebar">
<img src="http://farm9.staticflickr.com/8075/8449869813_1e62a60f01_b.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-1.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-2.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-3.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-4.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-5.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-6.jpg" />
</div>
Or show some animation while everything is loading:
window.addEventListener('load', (e) => {
document.body.classList.add('loaded');
});
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 70px;
height: 70px;
-webkit-animation: spin 2s linear infinite;
/* Safari */
animation: spin 2s linear infinite;
position: absolute;
left: calc(50% - 35px);
top: calc(50% - 35px);
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
body :not(.loader) {
opacity: 0;
}
body .loader {
display: block;
}
body.loaded :not(.loader) {
opacity: 1;
}
body.loaded .loader {
display: none;
}
<div class="loader"></div>
<div id="sidebar">
<img src="http://farm9.staticflickr.com/8075/8449869813_1e62a60f01_b.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-1.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-2.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-3.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-4.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-5.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-6.jpg" />
</div>
The only thing I can think of, to minimize the jump effect on your text, is to set min-height to where the image will appear, I would say - set it to the "shorter" image you know of. This way the jump will be less evident and you won't need to use lazyLoad or so... However it doesn't completely fix your problem.
Here's one naive way of doing it,
img {
box-shadow: 0 0 10px 0 rgba(#000, 0.1);
}
You can manipulate the values, but it creates a very light border around the image that doesn't push the contents. Images can load at whatever time they want, and you get a good user experience.
Here is what I did with Tailwind CSS, but it's just CSS:
img {
#apply bg-no-repeat bg-center;
body.locale-en & {
background-image: url("data:image/svg+xml;utf8,<svg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><text x='50%' y='50%' style='font-family: sans-serif; font-size: 12px;' dominant-baseline='middle' text-anchor='middle'>Loading…</text></svg>");
}
body.locale-fr & {
background-image: url("data:image/svg+xml;utf8,<svg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><text x='50%' y='50%' style='font-family: sans-serif; font-size: 12px;' dominant-baseline='middle' text-anchor='middle'>Chargement…</text></svg>");
}
}
You can find the width and height of the images in the developer tools console, for example in Chrome you can click the cursor icon in the developer tools console and when you hover on the page it will highlight all the properties of the elements in the page.
This will help you find the width and height of the images, because if you hover on top of your images it will give you the dimensions of the image and other more properties. You can also make an individual div for each image and make the div relative to the images width and height. You can do it like this:
The main div will contain the images and also the background-div which is below the image.
HTML:
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class=".mainDiv">
<div class="below"></div>
<img src="https://imgix.bustle.com/uploads/image/2020/2/13/da1a1ca4-95ec-40ea-83c1-4f07fac8b9b7-eqb9xdwx0auhotc.jpg" width="500"/>
</div>
</body>
</html>
CSS:
.mainDiv {
position: relative;
}
.below {
position: absolute;
background: #96a0aa;
width: 500px;
height: 281px;
}
img {
position: absolute;
}
The result will be that .below will be below the image and so when the image has trouble loading the user will instead see the grey .below div. You cannot see the .below div because it is hidden below the image. The only time you will see this is when the loading of the image is delayed. And this will solve all your problems.
I have got a way. But you will need to use JavaScript for it.
The HTML:
img = document.getElementById("img")
text = document.getElementById("text")
document.addEventListener("DOMContentLoaded", () => {
img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAA1BMVEWIiIhYZW6zAAAASElEQVR4nO3BgQAAAADDoPlTX+AIVQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwDcaiAAFXD1ujAAAAAElFTkSuQmCC";
text.innerHTML = "Loaded but image is not";
});
window.onload = function() {
img.src = "https://media.geeksforgeeks.org/wp-content/uploads/20190913002133/body-onload-console.png";
text.innerHTML = "Image is now loaded";
};
#img {
width: 400px;
height: 300px;
}
<hr>
<img id="img" src="https://media.geeksforgeeks.org/wp-content/uploads/20190913002133/body-onload-console.png">
<p>Here is the Image</p>
<p id="text">Not Loaded</p>
I'm using a <span class="image"> with a background:
.image {
background-image: url("image.jpg")
}
How can I also add a hint on this image when people put the mouse over it?
Is there a CSS way to achieve this?
Use the HTML title attribute:
<span class="image" title="This is a hint.">
You can do something with :after content:
.image:hover:after {
content:"This is a hint";
}
Demo: http://jsfiddle.net/fXuSB/
However, this content is probably better off in the HTML (and your image actually might be as well). You can use the title attribute for a simple default tooltip, or perhaps something like this:
<span class="image">
<span class="hint">This is a hint</span>
</span>
.image .hint {
display:none;
}
.image:hover .hint {
display:block;
}
Demo: http://jsfiddle.net/fXuSB/1/
I have a grey facebook icon and a full colour facebook icon. I would like to have them on my website so that when the mouse cursor is placed over the grey icon it becomes the full colour one. How do I achieve this?
Use CSS sprites and shift position based on CSS class for element and element:hover.
Old question, new answer with an old link:
http://webdesignerwall.com/tutorials/html5-grayscale-image-hover shows a solution with jQuery, which doesn't need 2 images (so it saves time and resorces if you want to do a larger gallery)
you need to have 2 versions from the Icon, one grey and another colored, and on hover, switch:
icon
{
background-image: greyIconURL
}
icon:hover
{
background-image: coloredIconURL
}
another way and better is #Kon solution
It can be done through the filter in css.
example
/* needed code */
.employee:hover img {
filter: none;
-webkit-filter: grayscale(0);
-webkit-transform: scale(1.01);
}
.employee img {
filter: gray;
-webkit-filter: grayscale(1);
transition: all .8s ease-in-out;
width: 100%; }
/* style col -- no need */
.row {
display:flex;
}
.col-md-3{
padding:5px;
width:25%;
}
<div class="row ourTeam">
<div class="col-md-3 col-12 q-pa-md employee">
<img src="https://placeimg.com/640/480/any">
<h6>Name</h6>
<span>CEO</span>
</div>
<div class="col-md-3 col-12 q-pa-md employee">
<img src="https://placeimg.com/640/480/any">
<h6>Name</h6>
<span>CEO</span>
</div>
<div class="col-md-3 col-12 q-pa-md employee">
<img src="https://placeimg.com/640/480/any">
<h6>Name</h6>
<span>CEO</span>
</div>
<div class="col-md-3 col-12 q-pa-md employee">
<img src="https://placeimg.com/640/480/any">
<h6>Name</h6>
<span>CEO</span>
</div>
</div>
that easy!
<img src="grey.png" onmouseover="this.src='blue.png'" onmouseout="this.src='greay.png'" />
EDIT use this instead of you wish to be following rules but increasing complexities and KBs
HTML
<img id="yourImage" />
JS
document.getElementsByTagNames('body')[0].addEventListener('load', function() {
document.getElementById('yourImage').addEventListener('mouseover', function() {
document.getElementById('yourImage').src = 'color.jpg'
}, false);
document.getElementById('yourImage').addEventListener('mouseout', function() {
document.getElementById('yourImage').src = 'grey.jpg'
}, false);
}, false);
PS this uses javascript as opposed to your css tag simply because it is a good practice to use image tag wherever possible because browsers will image as an image as opposed to a div tag where they will treat it as a content block (which is not good!).