I am using Image from semantic-ui-react to display an image. Code snippet is like below:
<Image
src={image}
fluid style={{filter: 'brightness(30%)'}}
as='a'
href={image}
target="_blank" //open image in new tab
/>
image is the link to "https://firebasestorage.googleapis.com/v0/b/freebies-df71a.appspot.com/o/m0PSbkGseb6gK85HWRuE%2Fphotos%2FIMG_9743.JPG?alt=media&token=7cef5382-5308-44da-b47d-e8780d279f22"
If you check the link, you would see an image with vertical display. However, when it's displayed in <Image>, the direction become horizontal. Check the screenshot below:
Can someone kindly help me to position the image to the correct direction? Thanks!
image-orientation could have helped you but worked once only with firefoxe, the clean solution is to edit the image and rotate it before uploading it or via a server script : some hints here img tag displays wrong orientation.
Via CSS there can only be a trick, which won't look nice and can break anytime.
here is one trick with transform starting from a square so the space used reamins the same and nothing is being overlapped after rotation:
wrap the image into a span,
turn the span into an inline-boxe,(can be : inline-block,inline-flex,inline-grid or inline-table)
make that span be a square (there will be a blank space) ,
then rotate it via transform
span {
display: inline-block;
border: solid;
transform: rotate(90deg);
}
/* demo*/
span,img {
max-width:100%;
margin:auto; /* see the flex/grid effect for img */
}
span+span {
display: inline-flex;
}
span:before {
content: '';
float: left;/* unused if flex parent*/
padding-top: 100%;/* it will strectch the span to make a square
if img width is bigger than it's height,
else the whole trick do not work => NOTICE that disclaimer :( */
}
inline-block
<span><img src="https://i.stack.imgur.com/rfzjE.jpg"></span>
inline-flex
<span><img src="https://i.stack.imgur.com/rfzjE.jpg"></span>
A simple solution is to give it a class and use transform to rotate the image.
<img className="rotate90" src="https://i.stack.imgur.com/rfzjE.jpg" />
.rotate90 {
transform: rotate(90deg);
}
Related
Sorry for my bad english first. Hope anybody can help anyway.
I try to achieve the following: Inside a page i have an image. Since it is in Wordpress a non-pro can edit it. I want on mouse-over an image to scale the content of the image inside the box. (so the image itself should not change its size.) i.e. I have an image of 200 x 200 px. On mouse over i want it to still have this size, but the content inside should zoom. Image size can be different. So i never know exakt measures.
It has to be done on the img-tag i think. No chance to put a div or anything around it. Anybody knows the solution?
Edit: So - i want the image on hover be larger, but be cropped to the size of the non-hover status.
Thank you!
Mike
Add the following styling to the .box.
overflow: hidden;
It sounds like you need a transform:scale
HTML
<div class="box">
<img src="http://lorempixel.com/output/city-q-c-200-200-1.jpg" alt=""/>
</div>
CSS
.box {
width:250px;
height:250px;
padding:10px;
margin: 25px;
border:1px solid grey;;
}
img {
display: block;
transition:all 0.25s ease;
}
.box:hover img {
-webkit-transform:scale(1.25)
}
JSfiddle Demo
I have a clickable div :
#next {
cursor:cell;
z-index:100;
}
That is activated by this JavaScript :
$('#next').click(function() {
$('.current').removeClass('current').hide()
}
And the divs:
#zob {
width: 100% ; height: 20px;
}
#zobbig {
position:absolute;
width: 100% ;
height: 250px;
}
and when i hover on #zob then #zobbig appears.
#zob:hover ~#zobbig {
cursor:alias;
opacity:0.8;
margin-left: auto;
margin-right: auto ;
}
My problem is that when it appears it make my #next div unlickable even when i'm not hovering on #zob. A zone of 250px (height of #zobbig) is disabling the click function of the #next div.
I just want my #next div to be clickable as it is supposed to be.
Thanks for your help
Dan
(you can see it directly on http://blog.dansayag.com)
or on http://jsfiddle.net/CEtfh/108/
to make it easier: if you go on the fiddle there is a picture of bob dylan.
If you point with the cursor on the eye, the cursor becomes a cross. If you point on the hat, the cursor is normal.
I just want the cursor to be a cross on the entire bob dylan image...
IF you go on fiddle you will also understand what is ZOB and what is ZOBBIG
Here is a link to fiddle, where I made it a little bit clearer for everyone to see.
Your problem comes from the fact that you don't set display: none; to your elements, but you simply make them invisible. Therefore they still exist on the HTML page and must align according to each other and the clickable div with the image inside gets pushed down from the #zob div. I suggest you change your way of hiding elements in the biginning with
disply: none;
and later display them again with
display: block;
EDIT: Resize the window in fiddle so the picture is a little bit larger, otherwise there will be no clickable div at all
when i click print option background image is not printing..could u please help me out.
here is my css
.OldNote {
background-image: url(/images/icons/arkiv.gif);
background-repeat: repeat;
width: 100%;
height: 100%;
margin: 0px;
}
Usually it is up to the user and their browser settings to print or not print background images. Check your browser settings.
If you don't want to rely on that, don't place the image in the background, place it on your page in an <img>-tag.
You can just add an image tag like this, whereever you want the image to be displayed :
<img src="url" class='printableonly' />
Then in the css, you can do like this :
#media screen {
.printableonly{
display: none;
}
}
#media print{
.printableonly {
display: inline;
}
}
i just add, if you want it to be background, there is no know way to make it repeat like a common backgrond. To put it under the content you may use css as adding it in other element before the content and giving both elements css position: absolute style, together with the *z-index: .. *, where z-index of content will be bigger.
Maybe you may look into full size background solution which is made very similar
This is a really odd one. I cannot seem to affect this one image via css at all. Tried adding a class specifically for the image and also writing css to affect just the image, but zip. It won't budge. The only thing that made it move was setting the neg. margin on the actual image, and there it only moved up about 40px and wouldn't go any further (taken that off since then). The image in question is the "imagine" tab (wp-image-39) on this page:http://circore.com/haute/. The bits of css I've left are:
img.wp-image-39
{
margin-top:-120px;
background:#ff0000;
}
.toptab
{
margin-top:-120px;
background:#ff0000;
}
I've also tried affecting all images in the content area and a bunch of other things. The red background is just so I can see if something worked. Argh! Thanks so much!
Instead of trying to put styles on the image, why not put styles on the containing div?
.toptab { margin-top: -50px; }
Would that suit your needs?
I would set position: absolute for the image. Then you will be able to move it freely with margins relative to its inline position.
The last 3 classes of your CSS
#text-4
{
font-size:11px;
line-height: 15px;
color: #000000;
text-align: center;
}
img.wp-image-39
{
margin-top:-120px;
background:#ff0000;
}
.toptab
{
margin-top:-120px;
background:#ff0000;
}
are inside #media print { which is actually not closed.
Put a closing bracket before #text-4 or wherever you need.
<div style="margin-top:-120px;">
Inline CSS would work also on the div that wraps around the . Hope this helps.
Image Rollover, no JavaScript, no Link, pure CSS, code validate and Browser compatible.
Hello all, I have been working 24hours strait to come up with this fairly easy solution. I want to know if everything is all right and if there are ways to improve. It's quite elegant, here we go:
I have only one image "Logo" but it will show as 2 different logo each with a rollover effect.
I use a sprite (only 1 image containing my 4 logos) and I just change it's position.
Here I insert my image in a div with
<div id="logo-rollover-1" class="logo-rollover">
<img title="whatever" alt="whatever" src="path-to-your-image">
</div>
Then I insert in another div the same image but with a different id
<div id="logo-rollover-2" class="logo-rollover">
<img title="whatever" alt="whatever" src="path-to-your-image">
</div>
Now my CSS:
.logo-rollover {
background: #ffd42a url('path-to-your-image');
width: 230px;
float: left;
height: 130px;
overflow: hidden;
position: relative;
}
.logo-rollover img { width: 460px; height: 260px; }
.logo-rollover :hover { opacity: 0; filter:alpha(opacity=0); }
#logo-rollover-1 { background-position: 0px -130px; }
#logo-rollover-2 { background-position: -230px -130px; }
#logo-rollover-2 img { right: 230px; position: relative; display: block; }
Explanations: when someone hover an image it becomes transparent and show the background witch is the same image but with a different position. opacity: 0 for Firefox, Google and filter:alpha(opacity=0) for Explorer. position: relative on the .logo-rollover class is for compatibility of hidden overflow with IE6 & IE7. display:block; is added to the id img for the Opera browser.
No Hack: When there is no link, there is no need for href="#" or "javascript:void(0)"
Advantages: instead of requesting 4 (or more) images, there is only 1 image (the total size of 1 image sprite is smaller then the total size of 4). the rollover is instant as the image is already downloaded. No hack, no false link, code validate. Add a title to the image. The only browser not rolling over is IE6 but the site is not broken, the logo show correctly. There is a hack for activating hover for IE6 but I didn't bother as IE6 is dead.
Tip: use the same path for your image everywhere.
I mean the "path-to-your-image" needs to be the same for all call. Because of browser caching.
Is this the best elegant way? Can this code be improve? I hope it will help someone because it was a real pain to develop thank to others user here I found some tricks here and there and came up with this.
Comment appreciated.
Why not completely removing inner <img> and create logo using CSS background?
<a id="logo">Logo</a>
#logo { width:100px; height:60px; background:url(path/to/logo.png) 0 0;
overflow:hidden; text-indent:-1000px; display:block; }
#logo:hover { background-position:0 -60px; }
Explanation:
<a> is the only element that supports :hover pseudo selector on IE6. If you want native solution for hover logo you must use this tag. Some people sometimes wrap other elements ex: <a><div></div></a> to give div hover property by accessing it from CSS using a:hover div { }
overflow:hidden; and text-indent:-1000px; hide text from inside the div. It is a good practise to leave text inside for accessibility reasons.
background sets the background color of your div, initialy alligned to 0, 0
background-position does the actual trick and shifts the image - it is moving it within the 'viewport' div making different part of the image visible.
nice description! I see one small improvement: put the background und no-repeat definition in your .logo-rollover class to have less css code (you have to write it only once instead of twice)