i changed the display of hotspots but I want to fix the hotspots location on the screen rather than on the photo. I want hotspots to follow the screen when I navigate through the panoramic view can i do this ?
I want to give perspective to hotspots my goal is to get hotspots more flat on the ground
.pnlm-hotspot-base {
position: absolute;
visibility: hidden;
cursor: default;
vertical-align: middle;
left: 0px;
top: 80px;
z-index: 1;
transform: skewX(-50deg);
transform-origin: 10% 30%;
}
.custom-hotspot-front {
position: absolute;
height: 50px;
width: 55px;
transform-origin: center;
transform-style: preserve-3d;
background-image: url("forward.png");
background-repeat: no-repeat;
background-position: 5px 0px;
transform: skewX(-50deg);
transform-origin: 10% 30%;
}
.custom-hotspot-front:hover {
background-color: rgba(173, 239, 255, 0.5);
perspective: 300px;
border-radius: 50%;
width: 60px;
height: 60px;
}
I tried something like this but it didn't work,
I want to do something like this;
Is it possible to do this with css?
and the image of the hotspots that I have obtained looks like this
Related
I have a diamond shape div that contains image and text/title.
.wrap {
display: inline-block;
overflow: hidden;
width: 150px;
height: 150px;
margin: 25px;
transform: rotate(45deg);
}
.wrap img {
display: block;
transform: rotate(-45deg);
transform-origin: left center;
}
.travel-title {
position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="wrap">
<img src="https://farm3.staticflickr.com/2178/3531465579_8bff044e9b_z.jpg?zz=1" />
<div class="travel-title">Tittle</div>
</div>
There are three things I would like to achieve:
1) How can I center image inside diamond shape div? This is because the image must be changed in the CMS by the customer.
2) How can I center text/title in diamond shape div? Also has to be changed by customer.
I have tried to achieved it with this piece of code without success:
.travel-title {
position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
3) Is it possible to zoom out image a bit?
Solutions with JS, JQuery would also work.
Any advice is appreciated.
UPDATE - SOLUTION FITTING IMAGE
I played around with math calculations from tip in comments and for my case this is what worked to make picture fit diamond shape although they are different size.
.wrap img {
display: block;
transform: rotate(-45deg);
transform-origin: left center;
height: 300px;
margin-top: 40px;
width: calc(170% - 8.28px);
height: calc(150% - 8.28px);
flex-shrink: 0;
}
How can I center image inside diamond shape div? This is because the image must be changed in the CMS by the customer.
You are already do this with transform-origin: left center; Is there a different way you want this centered?
How can I center text/title in diamond shape div? Also has to be changed by customer.
Please see the CSS below to see the changes I made to your CSS class.
Is it possible to zoom out image a bit?
I zoomed out the image by changing the height of the image. I added some margin to the top of the image to center the image vertically. The issue with centering images vertically and horizontally inside of custom divs is not knowing the size of the image that one of your customers will be uploading. I do not know what CMS you are using but if there is a way to crop the image via code or prompt the user to upload a picture with a certain dimension it will be easier for you to design this element of the site.
.wrap {
display: inline-block;
overflow: hidden;
width: 150px;
height: 150px;
margin: 25px;
transform: rotate(45deg);
}
.wrap img {
display: block;
transform: rotate(-45deg);
transform-origin: left center;
height: 300px;
margin-top: 15px;
}
.title-wrap {
width: 100%;
text-align: center;
}
.travel-title {
position: absolute;
top: 40%;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
color: red;
font-weight: bold;
font-size: 30px;
transform: rotate(-45deg);
}
<div class="wrap">
<img src="https://farm3.staticflickr.com/2178/3531465579_8bff044e9b_z.jpg?zz=1" />
<div class="title-wrap">
<div class="travel-title">Title</div>
</div>
</div>
I am creating Angular 5 project and I wanted to create custom sort icon in sort header to achieve this effect https://fontawesome.com/icons/caret-up?style=solid. I don't want to have this default arrow.
I tried to change css style, but it seems not to work. Or maybe is there any way to replace this icon by custom using JS?
::ng-deep {
.cdk-visually-hidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.mat-sort-header-stem {
background: none;
display: none !important;
}
.mat-sort-header-container {
position: relative;
}
.mat-sort-header-indicator {
transform: translateY(0px) !important;
}
.mat-sort-header-arrow {
position: absolute;
right: 20px;
transform: translateY(0%) !important;
}
}
Thank for any suggestions.
Edit.
If someone has this problem, I solved it by adding custom directive to mat-sort-header element. I also passed to directive the sort direction (ASC or DESC). Finally based on the direction I customized my sort icon using pure CSS.
see if this help you
.triangle {
overflow: hidden;
position: relative;
margin: 2em auto;
border-radius: 20%;
transform: translateY(50%) rotate(30deg) skewY(30deg) scaleX(.866);
width: 5em;
height: 5em;
}
.triangle:before {
border-radius: 20% 20% 20% 53%;
transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(30deg) scaleY(.866) translateX(-24%);
position: absolute;
background: #ccc;
pointer-events: auto;
content: '';
width: 5em;
height: 5em;
}
.triangle:after {
border-radius: 20% 20% 53% 20%;
transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(-30deg) scaleY(.866) translateX(24%);
position: absolute;
background: #ccc;
pointer-events: auto;
content: '';
width: 5em;
height: 5em;
}
<div class="triangle"></div>
I want to make the image only to be a link only and not outside of the picture with support of overlay functionality. I have problem to make the picture to make as a link only in relation to overlay. Today, the layout is perfect but not the link.
#aaa {
position: fixed;
left: 0;
display: block;
width: 128px;
height: 845px;
background: url('https://cdn2.iconfinder.com/data/icons/food-drink-3/512/Candy-128.png') no-repeat 50% 50%;
}
#aaa:hover {
background: url('https://cdn2.iconfinder.com/data/icons/food-drink-3/512/Candy-128.png') no-repeat 50% 50%;
}
A more responsive solution would be to use flexbox layout:
.overlay {
position: fixed;
top: 0;
left: 0;
height: 100%;
display: flex;
align-items: center;
}
#aaa {
display: block;
width: 128px;
height: 128px;
background: url('https://cdn2.iconfinder.com/data/icons/food-drink-3/512/Candy-128.png') no-repeat 50% 50%;
}
#aaa:hover {
background: url('https://cdn2.iconfinder.com/data/icons/food-drink-3/512/Candy-128.png') no-repeat 50% 50%;
}
<div class="overlay">
</div>
You can also align this centrally, like in the followin example:
http://codepen.io/jaycrisp/pen/ZQMEBm
You need to change the height of the link to same height as the image - 128px. Then display inline-block so the link state is exactly as you have specified. To get the link to be in the middle of the page you want it to be 50% from the top of the page minus half the height as a margin.
#aaa {
position: fixed;
left: 0;
display: inline-block;
width: 128px;
height: 128px;
margin-top:-64px;
top:50%;
background: url('https://cdn2.iconfinder.com/data/icons/food-drink-3/512/Candy-128.png') no-repeat 50% 50%;
}
#aaa:hover {
background: url('https://cdn2.iconfinder.com/data/icons/food-drink-3/512/Candy-128.png') no-repeat 50% 50%;
}
I am having an issue centring a <div id='divTwo'> inside another <div id='divOne'>. This is normal an easy thing to do, however in this instance i have transform: scale(); with transform-origin: 50% 50% 0px; applied on 'divTwo'
#divOne {
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
#divTwo {
width: 1024px;
height: 768px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
border-left: 131px solid #333333;
border-right: 131px solid #333333;
border-top: 47.5px solid #333333;
border-bottom: 47.5px solid #333333;
border-radius: 55px;
}
if the scale applied to the transform and the window is larger than the outerWidth(), 'divTwo' has no issue centring. However when the 'divTwo' is scaled and the window is smaller or equal to the outerWidth(). The div will no longer centre, instead it will place its centre point to be right side of the browser, resulting if half the of 'divTwo' being off the right hand-side of the browser. Changing transform-origin: 50% 50% 0px; to transform-origin: 0% 50% 0px; works so long as you don't scale vertically, and vice versa.
jsfiddle example : https://jsfiddle.net/yvyz49zp/
Thank you. I feel like am missing something of obvious.
I knocked this up relatively quickly in jsfiddle - no javascript needed. Just play around with the values until you get something you like.
Code:
body {
background: lightblue;
}
#container {
display: inline-block;
position: absolute;
width: 50%;
right: 50%;
top: 50%;
transform: translate(50%, -50%);
}
#dummy {
margin-top: 75%; /* Using the dummy is the trick - it locks the aspect ratio (at 4:3 in this case) */
}
#device {
position: absolute;
top: 10%;
bottom: 10%;
left: 0;
right: 0;
background-color: #333;
border-radius: 10%;
}
#screen {
position: absolute;
width: 70%;
height: 80%;
background: #0f0;
right: 50%;
top: 50%;
transform: translate(50%, -50%);
}
<div id="container">
<div id="dummy"></div>
<div id="device">
<div id="screen"></div>
</div>
</div>
I was trying to show a gif on my page and succeeded in showing it.
But now i want to show two gifs next to each other.
I was wondering is it possible to do so.
CSS
#loader {
position: fixed;
z-index: 1000;
margin-left: 0%;
margin-top: 0%;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 ) url('../Images/loading.gif') 50% 50% no-repeat;
}
HTML
<div id="loader"></div>
Jquery
$(window).load(function () {
$('#loader').fadeOut(500);
});
Now can i add one more gif in background using url???
I tried following but it does not seem to work
#loader {
position: fixed;
z-index: 1000;
margin-left: 0%;
margin-top: 0%;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 ) url('../Images/loading.gif') , url('../Images/ajax-loader.gif') 50% 50% ;
}
Check the fiddle
HERE
Code
div#loader {
background-image: url('http://www.misd.gov.sc/misdsd/Assets/programmer.gif'), url('http://www.misd.gov.sc/misdsd/Assets/programmer.gif');
background-repeat: repeat-y;
background-position: top left, top right;
width: 385px;
height: 100px;
border: 1px solid #000000;
}
You can have an element like this:
<div id="loader">
<span id='loadtxt'></span>
</div>
then two css classes like this:
#loader {
position: fixed;
z-index: 1000;
margin-left: 0%;
margin-top: 0%;
height: 100%;
width: 100%;
background: url('http://i837.photobucket.com/albums/zz296/sayalie30/loading.gif') 50% 50% no-repeat;
}
#loadtxt {
position: fixed;
z-index: 1000;
margin-left: 0%;
margin-top: 0%;
height: 100%;
width: 100%;
background: url('http://lotyd.xtgem.com/images/bg-loading.gif') 50% 70% no-repeat;
}
you can adjust it as per your need.
CSS3 does support multiple backgrounds (http://www.css3.info/preview/multiple-backgrounds/)
check out the examples below