i want to use a SVG as CSS mask, but since i want users to be able to upload the SVG themselves, the SVG is not embedded in the code, but it's own file instead.
I saw multiple explanations on how to use SVG as a mask but it always referred to the ID of an Inline SVG Code, that was embedded in the page, but never referred to using an external SVG
Right now i am using a PNG as mask, but i'd prefer a vector solution instead of a pixel solution.
Here's my results so far:
https://codepen.io/hergi/pen/bGwXOOw
.logo {
background-color: orange;
display: inline-block;
height: 10vh;
}
img {
opacity: 0;
vertical-align: middle;
margin: 0;
padding: 0;
height: 100%;
}
}
<div>PNG Mask:</div>
<div class="logo" style="mask: url(https://i.imgur.com/2nxTeqy.png) no-repeat center / contain;
-webkit-mask: url(https://i.imgur.com/2nxTeqy.png) no-repeat center / contain;">
<img src="https://i.imgur.com/2nxTeqy.png" />
</div>
<div>SVG Mask (css mask):</div>
<div class="logo" style="mask: url(https://svgshare.com/i/Ta9.svg) no-repeat center / contain;
-webkit-mask: url(https://svgshare.com/i/Ta9.svg) no-repeat center / contain;">
<img src="https://i.imgur.com/2nxTeqy.png" />
</div>
<div>SVG Mask (css mask-image):</div>
<div class="logo" style="mask-image: url(https://svgshare.com/i/Ta9.svg) no-repeat center / contain;
-webkit-mask-image: url(https://svgshare.com/i/Ta9.svg) no-repeat center / contain;">
<img src="https://i.imgur.com/2nxTeqy.png" />
</div>
Related
At the moment I am developing this simple site:
https://carl-robertshaw1.superhi.com/
The diagonal line is an SVG image but I what to code this SVG so that it is responsive, so it reminds at 1px on any screen, goes to the bottom left-hand corner and meets the logo in the same place, just off the 'C' of carl.
I've had a good look on here and can't find anything that would help me, can anyone help.
At the moment I have the SVG image set up like this:
.image1 {
position: fixed;
top: 0;
left: 0;
padding: 77px 230px 0 0;
}
.parent {
position: relative;
top: 0;
left: 0;
color: #ffffff;
}
<div class="parent">
<img class="image1" src='carl_line_mid.svg'>
</div>
Why don't just insert the SVG element into the HTML DOM?
Try:
<div class="parent">
<svg class="image1" style="height: 100%; width: 100%;">
<line x1="100%" y1="0" x2="0" y2="100%" style="fill:none; stroke:#fff; stroke-width:1px;"></line>
</svg>
</div>
I made some adjustments to the image. You can change the size of the svg via the style attribute (currently 100% of container), or remove the style attribute and set it with CSS. The width of the line will stay 1px.
See the browser support. It's great!
I can't get my images to align correctly between all browsers:
I'm wondering if it's a border issue?
Question: would the best way to resolve this be to create a media query? Right now I sort of try to find a good middle ground, but when viewed on a safari mobile app, those few pixels make a big difference. Or is there a better way to contain the image between the .mnhouse, .mnsenate, .ushouse, .ussenate1, .ussenate2 divs?
Here is my relevant HTML:
<div id="officials">
<div class='mnhouse'>
<div class="membersublist">
<div class="memberLink"><span id="mnhouselink">Show District <i class="fa fa-external-link-square"></i></span></div>
<div id='housemember' class='lcc_gis_member'></div>
<div id='housedistrict' class='lcc_gis_memberdistrict'></div>
</div>
<img id='housephoto' class='mnhouse_img' src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="0" height="0" alt=""/>
</div>
<div class='mnsenate'>
<div class="membersublist">
<div class="memberLink"><span id="mnsenlink">Show District <i class="fa fa-external-link-square"></i></span></div>
<div id='senatemember' class='lcc_gis_member'></div>
<div id='senatedistrict' class='lcc_gis_memberdistrict'></div>
</div>
<img id='senatephoto' class='mnsenate_img' src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="0" height="0" alt=""/>
</div>
</div>
And here is my relevant CSS:
#officials img {
height: 100%;
min-height: 87px;
max-width: 65%;
position: relative;
top: -56px;
border:none;
}
.membersublist{
margin-top:15px;
}
.mnhouse, .mnsenate, .ushouse, .ussenate1, .ussenate2 {
height:87px;
background-color: #e6e6e6;
border-top: 1px solid #a7a5a6;
border-right: 1px solid #a7a5a6;
border-bottom: 1px solid #a7a5a6;
border-left: 3px solid #a7a5a6;
}
Here is the demo, in case I miss any relevant code (you need to select a point on the map to open the results).
The issue is your use of negative relative positioning to try to line it up.
#officials img {
...
position: relative;
top: -56px;
...
}
Basically you are positioning it relative to the offset created be the text, which can never be counted upon to be 100% consistent across browsers.
Instead, consider adding positioning to .mnhouse wrapper, and then using absolute positioning to position the images.
.mnhouse {
position: relative;
}
#officials img {
height: 100%;
min-height: 87px;
max-width: 65%;
position: absolute;
top: 0;
border:none;
}
I am unable to get the section of the image I want from a collection of images.
I generated this CSS from http://spritepad.wearekiss.com
.search_img1{
background: url(/images/FBImages/1.png) no-repeat;
width: 16px;
height: 16px;
}
.search_img1 {
background-position: -152.98749923706055px 0;
}
The Img tag is :
<img id="search" src="images/FBImages/1.png" class="search_img1" title="search" alt="Seach" autocomplete="off">
I figured out the mistake I was doing. I had mapped the background image twice.
One at the time the img tag is desgined. and the other throughts its class [search_img1]
So what I'm trying to do is have an SVG overlay on an image on hover. Eventually I will animate it, but for now I'm just trying to get the overlay working. This is what I tried:
<div class="centering margin-on-top">
<img id="img1" src="media/circle-1.jpg" />
<img id="img2" src="media/circle-2.jpg" />
<img id="img3" src="media/circle-3.jpg" />
</div>
CSS:
#img1:hover {
background: url("../svg/stroke-ears.svg") no-repeat;
}
At first I thought it wasn't working at all. But then when I put the hover on the containing div instead and deleted the picture inside the "inspect element" window, the svg was there but hidden underneath the image.
Is there a way for me to maybe set a z-index on the image or the background?
Thanks in advance.
Change your CSS to this:
#img1 {
position: relative;
}
#img1:hover:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("../svg/stroke-ears.svg") no-repeat;
}
What you're doing is creating a pseudo-element to overlay on top of the img. Your original img had the background applied to the background of the img as opposed to overlaying it.
This new solution creates an element outside the normal DOM that will treat your img as a container and cover the entirety of its dimensions with an element that has the original background you wanted applied.
Update
JSFiddle example
So, silly me, trying to treat imgs as containing elements. Here's the fix.
HTML
<div class="inline-container centering margin-on-top">
<div class='img-holder'>
<img id="img1" src="http://placehold.it/200x200" />
</div>
<div class='img-holder'>
<img id="img2" src="http://placehold.it/200x200/FBC93D" />
</div>
<div class='img-holder'>
<img id="img3" src="http://placehold.it/200x200/075883" />
</div>
</div>
CSS
.inline-container {
font-size: 0;
}
.img-holder {
position: relative;
display: inline-block;
}
.img-holder:hover:after {
content: '';
position: absolute;
top: 0; bottom: 0; right: 0; left: 0;
background: url("http://placeskull.com/200/200") no-repeat;
}
You could easily swap the images to be background images on the new div, too, if you wanted to shorten up your HTML.
In my php page dynamically visualize the thumbnails. To make sure that these are all of the same size I do in this way
<a class="zoom" href="...">
<img src="thumb/default.png" width="130" style="background-image:url(thumb/<?php echo $images_jpg;?>);" class="centered" />
</a>
CSS
img.centered {
background-repeat: no-repeat;
background-position: center center;
}
/* 1 attempt */
a.zoom:hover {
background-image: url(thumb/zoom.jpg);
}
/* 2 attempt */
a.zoom img:hover {
background-image: url(thumb/zoom.jpg);
}
I would like to display a different image on event: hover, but this does not work. How could I do that? thanks
You could always do it like this.
HTML:
<div class="image" style="background-image:url(http://www.randomwebsite.com/images/head.jpg);">
<div class="overlay"></div>
</div>
CSS:
.image {
width: 200px;
height: 200px;
border: 1px solid;
}
.overlay {
width: 100%;
height: 100%;
}
.overlay:hover {
background: url(http://1.bp.blogspot.com/-lJWLTzn8Zgw/T_D4aeKvD9I/AAAAAAAACnM/SnupcVnAsNk/s1600/Random-wallpapers-random-5549791-1280-800.jpg);
}
So here we have the image you are getting via PHP on top as a div. And inside we have the overlay, the image you want when a user is hovering. So we set that to 100% width and height so it takes up all of the parent div and set the hover.
DEMO HERE
In your example the <img> always lays over the <a> background-image.
To avoid that, you could hide the image on hover. But that is kinda ugly ;)
a.zoom:hover {
background-image: url(thumb/zoom.jpg);
}
a.zoom:hover img
{
opacitiy: 0;
}
try this
<img class="centered" src="thumb/default.png"/>
and jquery
$(".centered").attr("src","second.jpg");