How do I set one of my pictures into portrait format? i tried using image orientation and it says property name unknown. I tried rotate 90 and that said the same thing..
css rotate="90", image inherit, webkit transform
<div class="row">
<div class="primary col">
<img class="josh images"
src="https://via.placeholder.com/384x288?text=Joshs+Image"
width="288px" height="384px"
alt="My Pic" rotate="90">
</div>
</div>
for the image to rotate 90 degrees
The website is www.shaunstanley.co.uk and it's on the portfolio page
You should use CSS and add a transform rule to your image, such as:
.josh {
width: 288px;
height: 384px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
}
<img class="josh" src="https://via.placeholder.com/384x288?text=Joshs+Image">
See this fiddle : https://jsfiddle.net/mbzqL6e4/1/
If you only want to rotate this specific image, maybe add and use an ID selector instead of a class selector.
Ref: https://www.w3schools.com/cssref/css3_pr_transform.asp
Related
I want to put text in "p" into center of my "div". My html is like this:
<div class="picture">
<img src="/sites/default/files/default_images/colorful-triangles-background_yB0qTG6.jpg" width="1080" height="1920" alt="background to view" typeof="foaf:Image">
</div>
<p class="textik"">Hello handsome.</p>
But i cant change html tags. I can only us CSS. Is there a way to do this? I tried some ways, but none seems to work.
The only way to do this without changing the HTML is to artificially align the p tag above the div tag like so.
p.textik {
margin-top: -5px;
}
Adjust as needed, and test for mobile devices.
If you don't want the elements underneath to move up as well, you can use either padding-bottom to prevent this.
p.textik {
padding-bottom: 5px;
}
I'm assuming you actually want to make the p tag appear in the centre of your image, so you can position it absolute and transform it's location using css. By using absolute positioning and transforming the location you don't need to reposition should the size of your image/outer elements change. Something like:
<div class='someOuterElement'>
<div class="picture">
<img src="http://placehold.it/500/500" width="500" height="500" >
</div>
<p class='textik'>Hello handsome.</p>
</div>
and style it with:
.someOuterElement {
position: relative;
width: 500px
}
.textik {
text-align; center;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%)
}
There's more info about css transform here
For some reason in Chrome the animation I have created will move to the left first, then move to the desired position.
It should only be moving to the right and top.
Css
.intro .cogFade .cog {
position: absolute;
}
.cog.large {
animation-name: cog-large;
}
#-webkit-keyframes cog-large {
100% {
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%, -40%) scale(1, 1);
}
}
Html
<div class="intro">
<div class="cogFade">
<div class="cogElements" style="margin-top: 194px;">
<div class="circle zoomout" style="margin-top: 194px;"></div>
<div style="font-size: 5rem;" class="cog large">
<i class="icon-cog spinning"></i>
</div>
</div>
</div>
<div style="font-size: 15rem; display: none;" class="b breathing">
<i class="icon-dotb"></i>
</div>
</div>
Please see the animation in action here:
http://jsfiddle.net/hutber/fejpm491/1/
I put your posted code into a JSFiddle, as the one linked by you was way too big to work with.
First off, the -webkit- prefix isn't needed anymore for animations in Chrome.
Your problem is that there are no proper initial values for position, left and top, leading to an in fact no completely defined animation. As you may have noticed, browsers behave differently in that case, as the animation looked different in Chrome and Firefox.
Just make sure that position: absolute is always true independently of the animation, then set proper start and end values for left and top.
Example based on your code
I have many images button in div and I want when I over mouse in an image it change the scr and show the same image but highlighted with border.
Like here show before /after :
It work fine but when I have all other images together it show like that :
I think i need to set the image when the mouse over to be in front ;any idea?
Update :
code:
<div id="mymap" width="720" style="width: 920px; height: 1227px; position: relative; left: 250px; transform: scale(.5,.5); -ms-transform: scale(.5,.5); -webkit-transform: scale(.5,.5); -o-transform: scale(.5,.5); -moz-transform: scale(.5,.5);">
<img id="Burimi" style="position: absolute; left: 10px" src="Images/Reagion/Burimi-B.png" onmouseover="this.src='Images/reagion/Burimi-A.png'" onmouseout="this.src='Images/reagion/Burimi-B.png'" />
<img id="N Batinah" style="position: absolute; left: 98px; top: 1px;" src="Images/Reagion/N Batinah-B.png" onmouseover="this.src='Images/reagion/N Batinah-A.png'" onmouseout="this.src='Images/reagion/N Batinah-B.png'" /></dive>
using simple CSS you should be able to change the z-index property. Assuming that the element is positioned either absolute or relative, just use
#mymap img:hover { z-index: 9999; }
#image:hover{
position: relative;
z-index: 2;
background-image: url('image2.png');
}
assuming #image is your image container , and image2.png is your hover-state image (while your are using background on container for all elements on the map, not just plain img tags).
It'll be quite dodgy though with detecting the hover on a correct elements.
use the selector ":hover" to change your css when the mouse over
Given the following HTML elements and their styles, the bottom left corner of the reflection is trimmed, which is undesirable. I have tried adjusting the height, overflow, margin, padding, etc. and nothing has made the entire image show. Whats the problem here in the first place? Is there anything I can do without changing the structure of the HTML?
//Elements
<div>
<img id="someImage" src="some-img.png"/>
<section class="reflection"></section>
<div>
//Styles
div {
perspecive:600px;
transform-style:perserve-3d;
}
div > img {
transform:rotateY(-60deg);
}
div > .reflection{
background:-moz-element(#someImage) no-repeat;
transform:scaleY(-1);
}
Only works in Mozilla:
http://jsfiddle.net/zorikii/RWfhc/
If anyone is interested its a pretty simple solution. The -moz-element() function takes the element exactly as it is displayed on screen.
The element() CSS function defines an value generated from an arbitrary HTML element. This image is live, meaning that if the HTML element is changed, the CSS properties using the resulting value are automatically updated. - MDN
So all I had to do was add some padding to the top of the original image element...
img{
transform:rotateY(60deg);
-webkit-transform:rotateY(60deg);
padding-top:100px;
}
.reflection{
background: -moz-element(#someImage) no-repeat;
height:400px;width:200px;
-moz-transform: scaleY(-1);
transform: scaleY(-1);
}
Updated Fiddle
You need to set the transform "origin", like this:
html{
background:black;
}
div{
perspective:600px;
-webkit-perspective:600px;
transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
/* sets origin slightly higher so it just off center */
-webkit-transform-origin: 50% 40%;
}
img{
transform:rotateY(60deg);
-webkit-transform:rotateY(60deg);
}
.reflection{
background: -moz-element(#someImage) bottom left no-repeat;
height:300px;width:200px;
-moz-transform: scaleY(-1);
}
I have a HTML code as
<div class="fl">
<div class="titleTextV">My ABC</div>
</div>
Now I have applied the CSS to rotate text as;
.titleTextV{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
font-size:1.3em;
background:#999;
height:100%;
}
I want this titleTextV class to span the entire height of its
container 100%, no px value and be positioned inside, but currently the text is moving out of the box.
If you user jQuery try this:
$('.fl').height($('.titleTextV').width());
And add display: inline-block; to your titleTextV class.
Live example at jsFiddle: