I am currently attempting to create a hero image on the home page of my react application. The issue I am running into is how the image currently sits.
currently the image sits a bit more centered than I would like, I am trying to duplicate something like this(please ignore the card in front of the background image):
I am unsure of how to position the background image further to the right and down a bit without there being white-space or it looking wonky on larger screens. I would also like the image to translate to the left as a screen is resized. The code I have attempted is as follows:
JSX
import React from 'react'
const Home = () => {
return (
<div className='h-o'>
<div className='h-i'></div>
</div>
)
}
export default Home
CSS:
.h-o {
top: 181px;
left: -44px;
width: 100%;
height: 644px;
background: transparent url('../../Assets/Images/miami-courthouse.jpg') 0% 0%
no-repeat padding-box;
opacity: 1;
}
attached is a code sandbox https://codesandbox.io/s/keen-montalcini-plwgc?file=/src/styles.css
To achieve what you want, you need to set transform-origin: top left for scale top left corner and set parent div as overflow: hidden; to keep it size
.img-wrapper {
display: inline-block;
overflow: hidden;
}
img.resize {
transform-origin: top left;
transform:scale(1.1);
-ms-transform:scale(1.1); /* IE 9 */
-moz-transform:scale(1.1); /* Firefox */
-webkit-transform:scale(1.1); /* Safari and Chrome */
-o-transform:scale(1.1); /* Opera */
}
<div class="img-wrapper">
<img src="https://i.imgur.com/aDExJLE.png" />
</div>
<div class="img-wrapper">
<img class="resize" src="https://i.imgur.com/aDExJLE.png" />
</div>
Related
I have created an application in ReactJS
HTML
<div id="root"></div>
React JS
function MouseCursor() {
return(
<div>
<img src='https://usabilla.com/graphics/resources/usabilla-logo.png' style={{cursor: "wait", backgroundRepeat: "no-repeat", height: "160px", width:"80%"}} />
<p>Right Now the cursor image changes when overing the image</p>
</div>
)
}
ReactDOM.render(<MouseCursor />, document.querySelector("#root"))
the jsfiddle for this code is :
https://jsfiddle.net/vewzyo2x/
When I hover the image the cursor changes, but I need to change the cursor of the mouse only when a certain part of the image is hovered
as shown in the below image
I need to change the cursor of the image only when the mouse is hovered on the circle shown in the above image. How can I do that?
If you measure various distances on the image when the 'blob' is circular you get CSS to calculate what dimensions and what positioning (in % terms) the blob has in relation to the whole image. As the image is stretched, the blob will stretch accordingly.
In this vanilla JS snippet the logo image is shown as the background to the div and the blob is its child div. This saves having to add another div into the DOM which wouldn't add more meaning.
The measurements were just taken with a ruler (the units don't matter)
.usabilla {
--h: 8.75;
/* image height measured by a ruler */
--w: 19.4;
/* image width */
--top: 1.5;
/* position of the blob */
--left: 11.7;
--diam: 2;
/* diameter of the blob (when the blob was circular) */
width: 80%;
height: 160px;
background-image: url(https://usabilla.com/graphics/resources/usabilla-logo.png);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center center;
position: relative;
}
.blob {
cursor: wait;
height: calc(var(--diam) / var(--h) * 100%);
width: calc(var(--diam) / var(--w) * 100%);
position: absolute;
top: calc(var(--top) / var(--h) * 100%);
left: calc(var(--left) / var(--w) * 100%);
background-color: transparent;
border-radius: 50%;
}
<div class="usabilla">
<div class="blob"></div>
</div>
I simply need two photos with half of each photo (left half visible from left image. right half visible from right image) both images are facing each other.
When hover on left image it shows it's right half and disappears right side image.
And When hover on right image it shows it's left half and left image disappears.
I tried using overflow:hidden and direction:rtl to hide the left side of right image. Default hides right side.
So when I hover on left image it works perfect and shows hidden part from right side.
But when I hover on left image I can't get the hidden part from left side.
.imagea {
max-width: 250px;
overflow: hidden;
transition: 2s;
}
.imageb {
max-width: 250px;
overflow: hidden;
direction: rtl;
transition: 2s;
}
.imagea:hover {
max-width: 100%;
}
.imagea:hover~.imageb {
max-width: 0px;
}
.imageb:hover {
max-width: 100%;
}
.imageb:hover .imagea {
max-width: 0px;
}
<div class="imagea">
<img src="https://via.placeholder.com/250" />
</div>
<div class="imageb">
<img src="https://via.placeholder.com/250" />
</div>
A pure CSS solution could be achieved via CSS specificty and the adjacent sibling combinator (ie +).
You could enclose the two img elements in an .images container using flex box to simplify horizontal placement of each image (ie on the "row axis"). By default, style each image so that the:
occupy 50% of the .images container width
occupy 100% of the containers height
use object-position to align the natural image to the respective side of that image elements boundary
Using the :hover pseudo class, the width of image elements are updated so that:
hovering the .images container causes the .right image to occupy the full width of the container and the .left image to occoupy no space (first case)
or, hovering the .left image (which has greater specifiy than the prior hover case) causes the .left image to occupy the full width of the container and the .right image to ocupy no space (second case)
In code this can be implemented as:
.images {
width:250px;
height:250px;
display:flex;
flex-direction:row;
}
/* Default state of image element */
.images img {
width:50%;
height:100%;
object-fit:cover;
transition:width ease-in-out 0.5s;
}
/* Default placement of image relative to box boundary */
.left {
object-position:left;
}
.right {
object-position:right;
}
/* Hover behavior for first case */
.images:hover .left {
width:0;
}
.images:hover .right {
width:100%;
}
/* Hover behavior for second case */
.images .left:hover {
width:100%;
}
.images .left:hover + .right {
width:0;
}
<div class="images">
<img class="left" src="https://via.placeholder.com/250/FFFF00" />
<img class="right" src="https://via.placeholder.com/250/FF00FF" />
</div>
Hope that helps!
Quick question. I'm using jquery to target the "src" attribute of the logo on my website. So when the navbar shrinks (on scroll) the logo changes to a lighter version of the same image.
This worked PERFECTLY when I was making the site locally in HTML. It even worked perfectly when I uploaded the HTML to my web-host. However as I've started to move my site into a Wordpress theme, there is about a second delay in the image switch over. I was wondering If someone could take a look at my site and tell me what the problem might be? - Like I said, it was working perfectly locally and uploaded as plain HTML. Do I need to somehow preload the second image in jquery?
My URL is: http://iwebyou.com.au - Scroll down and notice when the navbar shrinks, there is a delay in the logo switching over. Also please ignore the rest of my website, its unfinished and everything else is a complete mess right now haha..
Cheers
Without seeing your code, it's difficult to help further, but IMO the best solution would be to set the logo as a background-image via CSS classes and then change the css class with javascript when needed, rather then modifying an image src attribute.
<div class="logo logo-dark">Company Name for SEO</div>
and
<div class="logo logo-light">Company Name for SEO</div>
css:
.logo-dark {
background-image: #fff url('path to dark logo') no-repeat center center;
}
.logo-light {
background-image: #fff url('path to light logo') no-repeat center center;
}
.logo {
// common logo styles
}
Here's an example using opacity and transition:
window.addEventListener('scroll', e => {
const nav = document.querySelector('.nav');
if(window.scrollY > 50) {
nav.classList.add('dark');
}else {
nav.classList.remove('dark');
}
});
img {
width: 200px;
position: absolute;
top: 0;
left: 0;
transition: all 500ms ease;
}
.light {
opacity: 0;
}
.nav {
background: white;
position: fixed;
top: 0;
height: 60px;
width: 100%;
transition: all 500ms ease;
}
.nav.dark {
background: black;
}
.nav.dark .dark {
opacity: 0;
}
.nav.dark .light {
opacity: 1;
}
.content {
height: 1000px
}
<div class="content">
<div class="nav">
<img src="https://www.iwebyou.com.au/wp-content/uploads/2018/06/cropped-I-Web-YouDark-2.png" class="dark" />
<img src="https://www.iwebyou.com.au/wp-content/uploads/2018/06/I-Web-YouLight-2.png" class="light" />
</div>
</div>
I have this issue.. I want to be able to use
.custom-forums {
height: auto;
width: 100%;
border-image-source:transparent url("../images/forums.png") center top no-
repeat;
}
with
.custom-forums:hover {
background-image: url('../images/forums-hover.png');
}
The issue is this: When width is set to 100% it simply does not show the image. But when width and height are set to 170px it does work. I would like to have the button resize based on screen resolution and retain the ability to have the hover image change.
Much gratitude,
Mas21
Background images require a predefined height or content of a certain height in its container in order to work.
I had a thought you could do this another way:
Use a background image
Put another image in that div and on hover set it to opacity 0, or your preference and the bg image shows
Run this example:
.container {
background: url('http://placehold.it/199x199') no-repeat center center;
width: 200px;
}
img {
transition: opacity ease-in-out .5s;
}
img:hover {
opacity: .25;
}
<div class="container">
<img src="http://placehold.it/200x200">
</div>
I'm looking to do something like this but with CSS or JavaScript.
I need to highlight a certain part of an image but everything I find is how to do it in Photoshop. Can I do this with CSS or maybe JavaScript?
Am I even asking the right question?
EDIT:
Well here is a great submission but I have a follow up question:
I need this for a mobile device and portrait and landscape views as well for many devices like: iOS, iPad, Android, WebOS, Etc... So the fixed position I'm not sure will work.
Any advice?
You could use background-position with absolutely positioned divs as follows:
CSS:
.container {
position:relative;
height:455px;
width:606px;
}
.container div {
position:absolute;
background-image:url(http://www.beachphotos.cn/wp-content/uploads/2010/07/indoensianbeach.jpg);
}
.container .bg-image {
opacity:0.3;
height:455px;
width:606px;
}
.container div.highlight-region {
height:50px;
width:50px;
opacity:0;
}
.container div.highlight-region:hover {
opacity:1;
}
HTML:
<div class="container">
<div class="bg-image"></div>
<div class="highlight-region" style="top:50px;left:50px;background-position: -50px -50px;"></div>
<div class="highlight-region" style="top:150px;left:150px;background-position: -150px -150px;"></div>
</div>
Please see http://jsfiddle.net/MT4T7/ for an example
Credit to beachphotos.com for using their image.
EDIT (response to OP comment): Please also see http://jsfiddle.net/zLazD/ I turned off the hover aspect. also added some borders.
CSS changes:
.container div.highlight-region {
height:50px;
width:50px;
border: 3px solid white;
}
/* removed :hover section */
You can probably fake it, here is a sample:
http://jsfiddle.net/erick/JMBFS/3/
I covered the image with an opaque element. The color of the element is the same as the background of the image. Used z-index to put it on top.
You sure can. For example, most crop plugins provide "highlighting" as the basis of their UI. So for a complete cross-browser solution, just use an existing plugin, like Jcrop.
Of course, you might want it to be fixed, in which case you can programmatically tell the plugin which section to highlight and that the user shouldn't be able to move it, and then it will act as a highlighter, not a cropper.
These are the steps you can take to highlight a part of an image:
Access the image in JavaScript, and dynamically add another identical image immediately after it. (this could be done just in HTML, but it would change the semantics of your markup)
Position the second image over the first image
Apply a css mask on the second image so that only the "highlighted" part shows up
When the user hovers over the images' container, adjust the opacity of the first image.
I can provide more technical details on this later if need be.
What about overlaying the cropped image (with 100% opacity) on top of the whole image (with 30% opacity)?
This answer is only a proof of concept
body {
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.img {
position: absolute;
top: 0;
left: 0;
}
.img-base {
opacity: 0.3;
z-index: -99;
}
.img-overlay {
opacity: 1.0;
}
.cropper{
width: 150px; /* input width and height of the box here */
height: 120px;
overflow: hidden;
position: relative;
padding: 0 0 0 0;
margin: 0 0 0 0;
left: 90px; top: 170px; /* input starting location of the box here */
}
#overlay1 {
position: absolute;
left: 0px; right: 0px;
margin-left: -90px; margin-top: -170px; /* input starting location of the box here */
}
<img src="https://images.unsplash.com/photo-1583355862089-81e9e6e50f7a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" class="img img-base">
<div class="cropper">
<img src="https://images.unsplash.com/photo-1583355862089-81e9e6e50f7a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" class="img img-overlay" id="overlay1">
</div>