Hover over a building floor in HTML/CSS - html
I'm trying to change the color of a floor when I hover it.
https://imgur.com/a/pXEmNXp this is the image on which I'm trying to do it.
I tried the answer on this post: How can we draw 3D bulding structure from existing image Jquery,Css? but when I actually hover the floor it doesn't work, it only shows when I hover in a random place on the bottom of the image.
How can I do it so it shows that specific floor when I hover it, and how can I actually implement the map attribute for every floor?
Here's my code if it helps:
$(document).ready(function () {
$('map').on('mouseenter', function () {
$('.highlight-4').show();
})
$('map').on('mouseleave', function () {
$('.highlight-4').hide();
})
});
.highlight {
z-index: 9999;
display: none;
pointer-events: none;
}
.building {
position: absolute;
margin-left: 11%;
box-shadow: 0 15px 30px rgba(0, 0, 0, .6);;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
HTML
<img class="highlight highlight-4" src="/static/floor-4.png" alt="">
<img class="highlight highlight-3" src="/static/floor-3.png" alt="">
<img class="highlight highlight-2" src="/static/floor-2.png" alt="">
<img class="highlight highlight-1" src="/static/floor-1.png" alt="">
<img class="highlight highlight-0" src="/static/floor-0.png" alt="">
<img usemap="#image-map" class="building" src="/static/apartments.jpeg" alt="">
<map name="image-map">
<area target="" alt="" title="" href="" coords="1121,326,197,662,191,747,1130,473,1398,664,1387,544"
shape="poly">
</map>
Best way seems to implement your building image as an SVG file with <polyline> overlays. This way you can use CSS selectors and have much more control over your layouts. You can use <a> inside SVG, javascript, etc.
I took your image and loaded it in Draw SVG to create the required top floor <polyline>. After having saved the DrawSVG drawing locally I simply copied the <polyline> into my own SVG file, which, as you can see, works without any further HTML and added some CSS to do the highlighting on :hover.
You can insert this SVG into you html as if it were an <img>, it is just another tag (with benefits).
UPDATE
Revisited the original code I posted and replaced it with completely new code. The code is now a HTML page using an SVG file with the OPs image and showing how to use an <a> with some demo text on :hover (top floor again).
The HTML page has also been made 'responsive' by using math in CSS calc() and #media queries (go 'full-page' and resize browser, also check the page on various devices with the browser Developer Tools, 'portrait' and 'landscape' mode).
Explanation of the math can be found in other answers I gave on SO:
SO 62033317
SO 61867702
Now you create the other floors....
/*
Visit below answers on Stackoverflow for an explanation
of the math used for responsive sizing of elements.
https://stackoverflow.com/a/62033317/2015909
https://stackoverflow.com/a/61867702/2015909
*/
/**************************/
/* preferred global rules */
/**************************/
html,body { box-sizing: border-box; width: 100%; max-width: 100%; height: 100% }
*::before,*::after, * { box-sizing: inherit }
body { margin: 0 }
/* responsive base font size using y = mx + b */
html { font-size: calc(0.625vmin + 0.75rem) } /* (320,14)(1280,20) */
body { font-size: 1rem }
[band] { display: flex; flex-flow: column wrap; align-content: center }
[padded="1"], [padded="0"] [band*="padded"] {
/*
responsive page padding
and responsive band padding (same as responsive page padding, but at band level)
p1(320,32) p2(1920, 72) => 0.025x + 24
p3(320, 8) p4(1920,320) => 0.195x - 54.4
'Band padding' is only active when 'page padding' is off
*/
padding: calc( 2.5vh + 24px) calc(19.5vw - 54.4px);
}
/* Making sure the image fits in any viewport, either portrait or landscape */
#media (orientation: portrait ) { #construction-site { height: auto; width: 100% } }
#media (orientation: landscape) { #construction-site { height: 100%; width: auto } }
<body padded="0">
<div id="construction-site" band="padded">
<svg viewbox="0 0 1600 1200"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
.line { stroke: Black; stroke-opacity: 0; stroke-width: 2px; cursor: pointer }
.polyline { fill : Red ; fill-opacity : 0 }
.floor-text { fill: Black; stroke: none; fill-opacity: 0;
cursor: default; pointer-events: none;
font-weight: bold; font-family: sans-serif;
/* responsive font using y = mx + b */
font-size: calc(-1vmin + 51.2px); /* (320,48)(1920,32) */
}
.floor:hover>.line { fill-opacity: .4; stroke-opacity: .8 }
.floor:hover>.floor-text { fill-opacity: .7 }
</style>
<image href="https://i.imgur.com/0i4N0d3.jpg"/>
<a id="top-floor" class="floor" rel="noopener" target="_blank" href="javascript:void(0)" title="top floor, click for details...">
<polyline class="line polyline"
points="201.242,678.473 1121.43, 333.16 1370.24,
553.473 1387.74, 668.473 1127.49,
474.098 189.242, 753.473 202.242, 678.973"/>
<line class="line" x1="1121.42" y1="333.472" x2="1127.45" y2="474.097"/>
<text class="floor-text" x="800" y="150" text-anchor="middle">top floor demo text</text>
</a>
</svg>
</div>
</body>
Related
Justify the text inside a grid
I'm trying to justify my text inside a grid on cargo collective. Till now I couldn't do that and I had to export a svg for each title and place it as an image (like in this page: https://gracegloriadenis.com/IN-FROM-AND-WITH)
But right now the text would be afftected by a dark mode toggle and a svg won't be affected at all so I'll have to find a solution to justify the text in the div (as in "In, From and With" the title of the page I've just shared with you)
This is my code:
<div grid-col="x12" grid-pad="0" class=""><h1>CIVITONIA</h1>
Civitonia is the title that should be justified and it should touch both sides of the div always. Doing that I'd like not to have a size for the text (ex: font size:45rem;) but to have the text as big as the container. Is it possible?
Doing that it would be a lot easier even to have a responsive version of it, as the box would be smaller in the mobile and the text would follow it.
This is the script I'm using for the dark mode:
the script
<button onclick="myFunction()">Dark Mode</button>
<script>
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>
CSS related to it:
.dark-mode {
background-color: black!important;
color: #d9ff76!important;
}
.dark-mode button {
color: black!important;
background-color: #d9ff76;
padding: 5px 5px 5px 5px;
border-radius: 15px;
border: solid 1px #000000;
cursor: pointer;
position: absolute;
bottom: 10px;
}
Best you're going to get with just CSS (which is pretty close) is using clamp for font size, use like:
font-size: clamp(<min value>, <preferred value>, <max value>);
Then you set "min value" to 0px and set "max value" to 1000px (a value that will never be reached). The preferred value will need some tweaking based on the font family used and the amount of characters -- so you will have to do it on a per instance basis. I've set the below example up using CSS custom properties (variables) to make it a bit easier, all you have to do is set --clampFontSize: <prefered-value> on an element (preferably in vw units (viewport width))
body { line-height: 1; margin: 0 } h1 { margin: 0 }
.clampText h1 {
font-size: clamp(0px, var(--clampFontSize, 1vw), 1000px);
text-align: center
}
<div class="clampText" style="--clampFontSize: 17.5vw">
<h1>CIVITONIA</h1>
</div>
<div class="clampText" style="--clampFontSize: 12vw">
<h1>In, from, <em>and</em> with</h1>
</div>
Otherwise, if you put your SVG inline then you can control the color on the fly with CSS — the example will have a dark gradient background and white svg color if dark mode is on. Else it will have a light gradient background and black svg color if dark more is off
Note each <path> is set to fill: currentColor in the CSS, this is to inherit the path fill color from the parent <svg> which is inheriting the color from #colorOuterSVG — sometimes paths shouldn’t be filled though and instead have a stroke, or sometimes it’s a circle or something else. So the CSS may need to be adapted to your needs.
The gradients and button color are setup using CSS Custom Properties (variables)
:root {
--gradient1: #fca5a5, #fcd34d, #bef264, #6ee7b7, #67e8f9; /* Body */
--gradient2: #f0abfc, #c4b5fd, #93c5fd, #67e8f9, #6ee7b7; /* SVG Container */
--color: black; --contrast: white;
--darkOn: none; --darkOff: block;
}
:root.dark-mode {
--gradient1: #991b1b, #92400e, #3f6212, #065f46, #155e75; /* Body */
--gradient2: #86198f, #5b21b6, #1e40af, #155e75, #065f46; /* SVG Container */
--color: white; --contrast: black;
--darkOn: block; --darkOff: none;
}
body { background: linear-gradient(60deg, var(--gradient1)) no-repeat }
.darkModeOn { display: var(--darkOn) }
.darkModeOff { display: var(--darkOff) }
button {
background-color: var(--contrast);
border: 1px solid currentColor;
border-radius: 0.375em;
color: var(--color);
cursor: pointer;
display: inline-flex;
align-items: center;
margin-bottom: 8px;
padding: .5em 1em;
}
button span { margin-right: .25em }
.colorOuterSVG {
background: linear-gradient(60deg, var(--gradient2)) no-repeat;
border: 1px solid currentColor;
border-radius: 0.375em;
color: var(--color);
padding: 0.5em
}
.colorSVG { display: block }
.colorSVG path { fill: currentColor }
<button onclick="document.documentElement.classList.toggle('dark-mode')"><span class="darkModeOn">Disable</span><span class="darkModeOff">Enable</span>Dark Mode</button>
<div class="colorOuterSVG">
<svg class="colorSVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 1920 239.3" style="enable-background:new 0 0 1920 239.3;" xml:space="preserve">
<g>
<path d="M20.5,165.3V41.5c0-9.6-6.3-14.4-19-14.4c-1,0-1.5-1.6-1.5-4.8c0-3.2,0.5-4.8,1.5-4.8c3,0.4,11.9,0.6,26.6,0.6 s23.5-0.2,26.6-0.6c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-7,0-11.8,1-14.3,3.1c-2.5,2.1-3.8,5.9-3.8,11.3v123.8 c0,9.8,6,14.7,18.1,14.7c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-5.8-0.6-14.5-0.9-26.1-0.9c-11.6,0-20.3,0.3-26.1,0.9 c-0.8,0-1.3-1.6-1.3-4.8c0-3.2,0.4-4.8,1.3-4.8C14.5,180,20.5,175.1,20.5,165.3z"/>
<path d="M87.6,165.3v-116c0-8.5-1.5-14.3-4.6-17.5c-3.1-3.2-7.8-4.8-14.4-4.8c-0.8,0-1.3-1.6-1.3-4.8c0-3.2,0.4-4.8,1.3-4.8 c2.9,0.4,7.9,0.6,14.9,0.6c7,0,11.6,0.3,13.8,0.9c2.2,0.6,4.1,2.4,5.9,5.2L179.6,147c0.7,1.1,1.5,1.6,2.4,1.6 c1.5,0,2.3-1.4,2.3-4.1V41.7c0-9.7-5.7-14.6-17.2-14.6c-0.9,0-1.4-1.6-1.4-4.8c0-3.2,0.5-4.8,1.4-4.8c3.1,0.4,9.4,0.6,18.9,0.6 c9.5,0,15.8-0.2,18.8-0.6c0.9,0,1.4,1.6,1.4,4.8c0,3.2-0.5,4.8-1.4,4.8c-9,0-13.6,4.9-13.6,14.6V185c0,4.2-0.6,6.3-1.8,6.3 c-1.2,0-2.6-1.3-4.3-3.8l-87-137.5c-0.8-1.1-1.5-1.6-2.3-1.6c-0.8,0-1.1,0.8-1.1,2.3v114.6c0,9.8,5.4,14.7,16.1,14.7 c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-5.4-0.6-12.1-0.9-19.9-0.9c-7.8,0-14.5,0.3-20,0.9c-0.9,0-1.4-1.6-1.4-4.8 c0-3.2,0.5-4.8,1.4-4.8C82,180,87.6,175.1,87.6,165.3z"/>
<path d="M234.3,159.1c5.3,0,9.7,2.8,13.3,8.5c3,4.8,4.5,10.2,4.5,16.2c0,13-4.2,25.2-12.7,36.5c-4.7,6.3-9.9,11.2-15.6,14.7 c-0.1,0.2-0.2,0.3-0.4,0.3c-1.8,0-2.6-1.1-2.6-3.4c0-0.3,0-0.6,0.1-0.8l9.5-12.8c4.9-7.7,7.4-15.2,7.4-22.5c0-4.1-1.2-6.7-3.5-7.7 c-7.8-3.8-11.7-9.4-11.7-17c0-4.9,1.8-8.4,5.5-10.5C230,159.6,232,159.1,234.3,159.1z"/>
<path d="M346.2,165.3V41.5c0-9.2-6.3-13.8-18.8-13.8c-0.9,0-1.4-1.6-1.4-4.8c0-3.2,0.5-4.8,1.4-4.8c7.8,0.4,17.5,0.6,29,0.6 c11.6,0,22.6-0.1,33.3-0.3c10.6-0.2,21.7-0.3,33.3-0.3c4.7,0.1,7.1,0.9,7.3,2.4v41.3c0,1.5-1.3,2.3-3.8,2.3c-2.5,0-3.8-0.8-3.8-2.3 c0-21.3-8.7-32.3-26.1-32.9l-30.1-1.3c-2.8,0-4.1,1.7-4.1,5.1v62c0,2.6,0.9,3.9,2.8,3.9h16.4c5,0,8.2-1.3,9.7-3.8 c1.4-2.5,2.1-6.7,2.1-12.6V67.8c0-1.1,1.2-1.6,3.5-1.6c2.3,0,3.5,0.5,3.5,1.6c-0.5,5.9-0.8,17.7-0.8,35.6c0,17.9,0.3,29.8,0.8,35.7 c0,1.1-1.2,1.6-3.5,1.6c-2.3,0-3.5-0.5-3.5-1.6v-14.7c0-5.9-0.8-10-2.5-12.4c-1.7-2.4-4.8-3.6-9.3-3.6h-16.7c-1.7,0-2.5,1-2.5,3.1 v53.9c0,9.8,6.3,14.7,18.8,14.7c0.9,0,1.4,1.6,1.4,4.8c0,3.2-0.5,4.8-1.4,4.8c-5.9-0.6-14.8-0.9-26.6-0.9s-20.6,0.3-26.4,0.9 c-0.9,0-1.4-1.6-1.4-4.8c0-3.2,0.5-4.8,1.4-4.8C340.2,180,346.2,175.1,346.2,165.3z"/>
<path d="M463.7,165.3V41.5c0-9.2-6.3-13.8-19-13.8c-1,0-1.5-1.6-1.5-4.8c0-3.2,0.5-4.8,1.5-4.8c7.7,0.4,14.8,0.6,21.3,0.6 c6.5,0,13-0.1,19.4-0.3c6.4-0.2,11.7-0.3,15.7-0.3c15.4,0,27.5,4,36.3,12.1c8.8,8.1,13.2,19.7,13.2,34.8c0,23.2-9,37.8-26.9,43.7 c-1.8,0.7-1.8,3.1,0,7.2c9.7,21.5,21.7,40.7,36,57.6c7.4,8.8,13.7,13.2,18.7,13.2c0.9,0,1.4,0.7,1.4,2.2s-0.5,2.2-1.4,2.3 c-2.8,0.3-5,0.5-6.7,0.5c-11,0-19-2.3-24.2-6.8c-8.2-7.1-15.3-15.6-21.2-25.4l-17.6-32.1c-3.2-5.9-5.7-9.7-7.5-11.3 c-1.8-1.6-4.6-2.4-8.4-2.4c-3.7,0-6.6-0.1-8.6-0.4c-2-0.3-3.3-0.2-3.8,0.3s-0.8,1.3-0.8,2.3v49.3c0,9.8,6.5,14.7,19.5,14.7 c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-5.2-0.6-14.1-0.9-26.9-0.9c-12.7,0-21.6,0.3-26.7,0.9c-0.9,0-1.4-1.6-1.4-4.7 s0.5-4.7,1.4-4.8C457.7,180,463.7,175.1,463.7,165.3z M479.8,100.2c0,2.6,1.3,4.2,3.8,4.9c2.5,0.7,6.1,1,10.8,1 c25.9,0,38.8-13.6,38.8-40.9c0-11-3.5-20.2-10.5-27.8c-7-7.6-16.7-11.4-29.1-11.4h-9c-3.1,0-4.6,1.3-4.6,3.9V100.2z"/>
<path d="M586.8,104.9c0-22,5.9-42.5,17.6-61.6c11.8-19,27.6-28.6,47.5-28.6c17.8,0,33,8.7,45.6,26.1c12.6,17.4,18.9,38.9,18.9,64.5 c0,21.4-5.8,41.2-17.5,59.4c-11.6,18.2-27.5,27.2-47.6,27.2c-19.4,0-35.1-8.6-46.9-25.7C592.7,149.2,586.8,128.7,586.8,104.9z M606,97.5c0,26,5,46.6,15,62c10,15.4,20.6,23.1,31.8,23.1c14.2,0,25.2-7.2,33-21.7c7.7-14.5,11.6-32.3,11.6-53.5 c0-23.4-4.9-43.2-14.6-59.4c-9.8-16.2-20.4-24.4-32.1-24.4c-14.1,0-25,7.6-32.9,22.7C609.9,61.6,606,78.6,606,97.5z"/>
<path d="M747.1,165.3l6-118.5c0.4-9-2.4-15-8.4-17.8c-2.7-1.3-6.2-1.9-10.7-1.9c-0.9,0-1.4-1.6-1.4-4.8c0-3.2,0.5-4.8,1.4-4.8 c3,0.4,8,0.6,15,0.6c7,0,11.6,0.6,13.7,1.9c2.1,1.3,3.8,3.7,5.1,7.2l47.5,126.6c0.8,2.3,1.5,3.4,2.1,3.4c0.7,0,1.5-1.2,2.4-3.6 l48.7-127.1c1.4-3.8,3.3-6.2,5.6-7.1c2.3-0.9,6.7-1.3,13.3-1.3c6.6,0,11.4-0.2,14.6-0.6c0.9,0,1.4,1.6,1.4,4.8 c0,3.2-0.5,4.8-1.4,4.8c-8.6,0-14.2,2.9-16.8,8.8c-1.4,3.4-2.1,8.1-2,13.9l0.6,115.5c0.1,9.8,5.4,14.7,15.9,14.7 c1,0,1.5,1.6,1.5,4.8c0,3.2-0.5,4.8-1.5,4.8c-5-0.6-12.7-0.9-23-0.9s-18.3,0.3-24,0.9c-0.9,0-1.4-1.6-1.4-4.8 c0-3.2,0.5-4.8,1.4-4.8c10,0,15-4.9,14.9-14.7l-0.4-107.1c0-1.1-0.3-1.6-0.9-1.6c-0.6,0-1.1,0.5-1.5,1.5l-50.7,131.3 c-0.6,1.4-1.3,2.1-2.3,2.1c-0.9,0-1.6-0.7-2.1-2.1L763.2,58c-0.5-1.4-1-2.1-1.6-2.1c-0.6,0-0.9,0.7-1,2.1l-5.1,107.4 c-0.5,9.8,4.8,14.7,15.8,14.7c1,0,1.5,1.6,1.5,4.8c0,3.2-0.5,4.8-1.5,4.8c-5.4-0.6-11.9-0.9-19.7-0.9s-14.5,0.3-20.1,0.9 c-0.9,0-1.4-1.6-1.4-4.8c0-3.2,0.5-4.8,1.4-4.8C741.5,180,746.7,175.1,747.1,165.3z"/>
<path d="M933.6,159.1c5.3,0,9.7,2.8,13.3,8.5c3,4.8,4.5,10.2,4.5,16.2c0,13-4.2,25.2-12.7,36.5c-4.7,6.3-9.9,11.2-15.6,14.7 c-0.1,0.2-0.2,0.3-0.4,0.3c-1.8,0-2.6-1.1-2.6-3.4c0-0.3,0-0.6,0.1-0.8l9.5-12.8c4.9-7.7,7.4-15.2,7.4-22.5c0-4.1-1.2-6.7-3.5-7.7 c-7.8-3.8-11.7-9.4-11.7-17c0-4.9,1.8-8.4,5.5-10.5C929.3,159.6,931.3,159.1,933.6,159.1z"/>
<path d="M1087.5,163.2c-0.7,2.9-1,5.4-1,7.4c0,3.4,1.1,5.1,3.3,5.1c2.2,0,6.5-3.9,13.1-11.8c0.6-0.8,1.5-0.3,2.8,1.4 c0.9,1.1,1.4,2,1.4,2.8c0,0.4-0.1,0.8-0.3,1c-4.4,6.8-9.3,12.3-14.7,16.6c-5.4,4.3-10,6.4-13.9,6.4c-4.1,0-6.2-3.3-6.2-9.9 c0-4.7,0.8-9.7,2.4-15.1l4.4-14.4l-1.3-0.5c-15.9,26.6-29.4,39.9-40.6,39.9c-4,0-7.1-2-9.2-6c-2.1-4-3.2-9-3.2-15.1 c0-17.7,5.8-36.8,17.5-57.4c11.6-20.6,23.9-30.9,36.9-30.9c4.9,0,9.3,2.3,13.4,7l2.4-8.8c0.5-2,2.7-3,6.7-3c3.9,0,5.7,1,5.1,3 L1087.5,163.2z M1084.9,120.5l4.5-19c-2.8-7-7.2-10.5-13.2-10.5c-9,0-17.4,9.2-25.2,27.6c-7.7,18.4-11.6,34.4-11.6,48 c0,7.9,2,11.8,5.9,11.8c3.7,0,8.9-4.2,15.6-12.6c6.7-8.4,11.9-16.2,15.7-23.4C1080.4,135.2,1083.1,127.9,1084.9,120.5z"/>
<path d="M1188.1,163.2c-0.7,2.8-1,5.4-1,7.8c0,3.3,1.1,4.9,3.5,4.9c2.3,0,6.5-3.9,12.5-11.7c0.2-0.3,0.4-0.4,0.6-0.4 c0.8,0,1.7,0.5,2.4,1.6c0.8,1.1,1.2,1.9,1.2,2.5c0,0.6-0.1,1-0.3,1.1c-10.7,15.3-20.3,23-28.6,23c-3.7,0-5.5-3.5-5.5-10.5 c0-3.3,0.3-6.6,1-10l12.6-55.9c2-8.9,3-14.9,3-18.2c0-3.8-1-5.7-3-5.7c-5.7,0-13.9,9.7-24.5,29c-10.6,19.3-20,41.9-28.3,67.7 c-0.7,2.4-3,3.6-7,3.6c-4,0-5.7-1.4-5.1-4.1l17.7-77.7c0.4-1.8,0.6-3.4,0.6-4.9c0-3.9-1.1-5.9-3.2-5.9c-2.1,0-5.7,3.6-10.7,10.8 c-0.3,0.3-0.5,0.4-0.8,0.4c-0.8,0-1.6-0.5-2.4-1.6c-0.8-1-1.3-1.9-1.3-2.7c0-0.3,0.1-0.6,0.3-0.8c10.3-15.9,19.3-23.9,26.9-23.9 c3.8,0,5.8,3.8,5.8,11.3c0,3.5-1,9.3-2.9,17.3l-6.9,30.3l0.8,0.5c16.5-39.6,31.5-59.4,45.1-59.4c7.1,0,10.7,5.2,10.7,15.7 c0,5.1-0.9,11.8-2.8,20.1L1188.1,163.2z"/>
<path d="M1284,162.4c-0.5,2.4-0.8,4.4-0.8,5.9c0,4.1,0.8,6.2,2.5,6.2c3.4,0,7.9-3.9,13.4-11.8c0.2-0.3,0.7-0.2,1.6,0.3 c0.9,0.4,1.6,1.2,2.1,2.3c0.5,1.1,0.6,1.8,0.4,2.1c-11.6,16.5-20.8,24.7-27.6,24.7c-4,0-6-4.5-6-13.4c0-2.2,0.2-4.5,0.6-6.9l4-22.4 l-1.4-1.4c-6.9,12.5-14,22.9-21.5,31.4c-7.5,8.5-14.5,12.7-21.1,12.7c-4.1,0-7.2-2.2-9.3-6.5c-2.1-4.3-3.1-9.4-3.1-15.1 c0-17.8,5.8-37.1,17.4-57.8c11.6-20.7,23.9-31,37-31c5.4,0,9.8,2.6,13.2,7.9l9.3-51.6c1-5.6,1.5-9.6,1.5-12.1 c0-6.9-2.6-10.3-7.7-10.3c-1,0-1.5-1.1-1.5-3.3c0-2.2,0.5-3.3,1.5-3.3c4.7,0,9.6-1.1,14.9-3.5c5.2-2.3,8-3.5,8.4-3.5 c0.8,0,1.3,0.5,1.3,1.6c0,0.3-0.1,0.8-0.3,1.5L1284,162.4z M1282.9,102.3c-2.9-8.2-7.4-12.3-13.3-12.3c-9,0-17.4,9.3-25.2,28 c-7.7,18.7-11.6,34.7-11.6,48.1c0,8.2,2,12.3,5.9,12.3c4.7,0,11.3-6,20-18.1c8.6-12.1,15.3-23.7,20-34.8L1282.9,102.3z"/>
<path d="M1382,41.5c-3.4-9.6-8.4-14.4-14.8-14.4c-0.8,0-1.3-1.6-1.3-4.8c0-3.2,0.4-4.8,1.3-4.8c3,0.4,10.1,0.6,21.4,0.6 c11.3,0,18.5-0.2,21.7-0.6c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-7.6,0-11.4,2.4-11.4,7.2c0,2,0.5,4.4,1.5,7.3L1440,152 c0.7,1.6,1.3,2.4,1.8,2.4c0.8,0,1.4-0.9,2-2.6l14.6-39.8c0.5-1.5,0.8-3.1,0.8-4.9c0-1.8-0.3-3.7-1-5.7l-21.5-59.9 c-3.4-9.6-8-14.4-13.7-14.4c-0.9,0-1.4-1.6-1.4-4.8c0-3.2,0.5-4.8,1.4-4.8c2.9,0.4,9.9,0.6,20.8,0.6c11,0,18-0.2,21.1-0.6 c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-7.5,0-11.3,2.3-11.3,6.9c0,2,0.5,4.5,1.5,7.5l11.7,32.5c0.8,1.9,1.4,2.9,1.9,2.9 c0.6,0,1.3-1,2-3.1l11.3-31.1c1.2-3.1,1.8-5.7,1.8-7.9c0-5.1-3.3-7.7-10-7.7c-1,0-1.5-1.6-1.5-4.8c0-3.2,0.5-4.8,1.5-4.8 c3,0.4,9.3,0.6,19,0.6c9.6,0,16-0.2,19.1-0.6c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-10,0-16.3,3.6-19,10.8l-17.6,48.7 c-0.7,2.1-1,4-1,5.8c0,1.3,0.2,2.7,0.6,4l20,55.6c0.7,1.6,1.3,2.4,1.9,2.4c0.7,0,1.3-0.9,1.8-2.6l39.8-109.1 c1.2-3.1,1.8-5.7,1.8-7.8c0-5.2-3.3-7.8-10-7.8c-0.8,0-1.3-1.6-1.3-4.8c0-3.2,0.4-4.8,1.3-4.8c3.2,0.4,9.2,0.6,18.1,0.6 s14.9-0.2,18-0.6c0.9,0,1.4,1.6,1.4,4.8c0,3.2-0.5,4.8-1.4,4.8c-8.7,0-14.4,3.6-17.1,10.8l-54.4,149.9c-1.2,3-2.1,4.5-2.8,4.5 c-0.8,0-1.6-1.5-2.6-4.4l-23-64.3c-0.5-1.3-1-2-1.6-2c-0.5,0-1,0.7-1.5,2l-23.2,64.3c-1,2.9-1.9,4.4-2.8,4.4 c-0.6,0-1.5-1.5-2.6-4.4L1382,41.5z"/>
<path d="M1589,165.3V41.5c0-9.6-6.3-14.4-19-14.4c-1,0-1.5-1.6-1.5-4.8c0-3.2,0.5-4.8,1.5-4.8c3,0.4,11.9,0.6,26.6,0.6 s23.5-0.2,26.6-0.6c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-7,0-11.8,1-14.3,3.1c-2.5,2.1-3.8,5.9-3.8,11.3v123.8 c0,9.8,6,14.7,18.1,14.7c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-5.8-0.6-14.5-0.9-26.1-0.9c-11.6,0-20.3,0.3-26.1,0.9 c-0.8,0-1.3-1.6-1.3-4.8c0-3.2,0.4-4.8,1.3-4.8C1583,180,1589,175.1,1589,165.3z"/>
<path d="M1688.2,165.3V33.5c0-3.8-1.6-5.8-4.9-5.8h-15.2c-17.7,0-26.6,11.6-26.6,34.7c0,1.2-1.3,1.8-3.8,1.8 c-2.6,0-3.8-0.6-3.8-1.8V22.3c0-2.8,2.6-4.1,7.8-4.1c6.8,0,15.6,0.1,26.6,0.3c10.9,0.2,20.3,0.3,28.1,0.3c7.8,0,17.1-0.1,27.9-0.3 c10.8-0.2,20-0.3,27.6-0.3c5.3,0,7.9,1.4,7.9,4.1v40.1c0,1.2-1.3,1.8-3.8,1.8c-2.6,0-3.8-0.6-3.8-1.8c0-23.1-8.8-34.7-26.4-34.7 h-16.2c-3.4,0-5.1,1.9-5.1,5.8v131.8c0,9.8,6.3,14.7,19,14.7c0.9,0,1.4,1.6,1.4,4.8c0,3.2-0.5,4.8-1.4,4.8 c-6.2-0.6-15.3-0.9-27.4-0.9c-12.1,0-21.2,0.3-27.4,0.9c-0.9,0-1.4-1.6-1.4-4.8c0-3.2,0.5-4.8,1.4-4.8 C1681.6,180,1688.2,175.1,1688.2,165.3z"/>
<path d="M1900.7,165.3c0,9.8,6,14.7,18.1,14.7c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-10.7-0.6-19.4-0.9-26.1-0.9 c-6.7,0-15.4,0.3-26,0.9c-0.8,0-1.3-1.6-1.3-4.7s0.4-4.7,1.3-4.8c12,0,18-4.9,18-14.7v-54.6c0-3.2-1.3-4.8-3.9-4.8h-70.6 c-2.6,0-3.9,1.6-3.9,4.8v54.6c0,9.8,6,14.7,18.1,14.7c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-10-0.6-18.5-0.9-25.5-0.9 c-7,0-15.9,0.3-26.6,0.9c-0.8,0-1.3-1.6-1.3-4.7s0.4-4.7,1.3-4.8c12,0,18-4.9,18-14.7V41.5c0-9.6-6.3-14.4-19-14.4 c-1,0-1.5-1.6-1.5-4.8c0-3.2,0.5-4.8,1.5-4.8c3,0.4,11.9,0.6,26.6,0.6s23.5-0.2,26.6-0.6c0.8,0,1.3,1.6,1.3,4.8 c0,3.2-0.4,4.8-1.3,4.8c-12.1,0-18.1,4.8-18.1,14.4v49c0,3.3,1.3,4.9,3.9,4.9h70.6c2.6,0,3.9-1.6,3.9-4.9v-49 c0-9.6-6.3-14.4-19-14.4c-1,0-1.5-1.6-1.5-4.8c0-3.2,0.5-4.8,1.5-4.8c3,0.4,11.9,0.6,26.6,0.6c14.7,0,23.5-0.2,26.6-0.6 c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-12.1,0-18.1,4.8-18.1,14.4V165.3z"/>
</g>
</svg>
</div>
Creating an interactive semicircle navigation with HTML and Css
i want to create an interactive wiki with html & css by using a semicircle and dividing the circle into different pieces for each topic. I had the following draft in mind:
https://i.stack.imgur.com/f9Oqp.png
I haven't done html and css in the context of creating own SVGs with animations.
Currently i am using this example as a starting point:
<ul class="menu">
<li class="one">
<a href="#">
<span class="icon">Category 1</span>
</a>
</li>
<li class="two">
<a href="#">
<span class="icon">Category 2</span>
</a>
</li>
<li class="three">
<a href="#">
<span class="icon"> Category 3</span>
</a>
</li>
<svg height="0" width="0">
<defs>
<clipPath clipPathUnits="objectBoundingBox" id="sector">
<path fill="none" stroke="#111" stroke-width="1" class="sector" d="M0.5,0.5 l0.5,0 A0.5,0.5 0 0,0 0.75,.066987298 z"></path>
</clipPath>
</defs>
</svg>
$base: #A5E2F3;
.menu {
padding: 0;
list-style: none;
position: relative;
margin: 30px auto;
width: 70%;
height: 0;
padding-top: 70%;
}
#media all and (max-width: 320px) {
.menu {
width: 230px;
height: 230px;
padding: 0;
}
}
#media all and (min-width: 700px) {
.menu {
width: 500px;
height: 500px;
padding: 0;
}
}
.menu li {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
clip-path: url(#sector);
/* try this one in Chrome/Opera/Safari */
/* clip-path: polygon(50% 50%, 100% 50%, 75% 6.6%); */
a {
display: block;
width: 100%;
height: 100%;
}
&:hover {
background-color: gold;
}
}
.one {
background-color: $base;
transform: rotate(0deg);
}
.two {
background-color: darken($base, 7%);
transform: rotate(-60deg);
}
.three {
background-color: darken($base, 14%);
transform: rotate(-120deg);
}
.icon {
position: absolute;
/* exact values here depend on what you are placing inside the items (icon, image, text, etc.) */
right: 15%;
top: 30%;
/* make sure it it rotated enough; angle of rotation = angle of the sector itself */
transform: rotate(60deg);
/* style further as needed */
color: darken($base, 60%);
font-family: Indie Flower;
font-size: 25px;
}
p {
text-align: center;
width: 80%;
margin: 0 auto;
}
These are my question about this task:
1) How can i create interactive buttons
- click on the button will make the remaining buttons disappear
- 1/3 semicircle will expand to a 1/4 semicicircle
2) How can i improve the clicks with animations
- Button Grows from 1/3 to 1/4 semicircle
Thank you in advance!
To answer your questions:
1). An interactive button can be created in many ways, personally I would do something like this in HTML:
<button type="button" data-toggle="menuItem">Toggle</button>
and then in JavaScript (using jQuery) you can check for when this button is clicked:
$("button[data-toggle='menuItem']").on("click", function () {
// - Do your toggle logic in here
// - Do '.hide()' on all buttons that aren't '$(this)'.
// - Add class to '$(this)' to make it expand.
});
2). It really depends on how you're creating your semi-circles but I would say your best cross-browser solution would be to look into the CSS 'transition' property a bit more: W3Schools CSS transition Property
I hope this helps, let me know if you don't understand something I've said.
Font in Chrome is too fuzzy - how can I fix this?
I am using font Segoe UI and in a particular section on the site, the font is very blurred in Google Chrome. I am also uploading the live site: http://impressivefirm.com/dynamics365 Below are the images for comparison: Chrome Firefox
I don't think this has anything to do with the selected font, although there might be fonts that don't exhibit this bug. Have a look at Woodrow's answer on a similar question.
In short, the problem's root is the fact you are skewing and translating twice in order to get the hex shape .
From a specific technical point of view, I think you'll only get a clear answer from someone with intimate knowledge on how Chrome's rendering engine works and specifically how anti-aliasing is applied to text.
What's notable is that it's a rendering engine with a fairly large usage, powering Chrome, Android Browser and Opera. I believe you're roughly looking at 60 - 70% of internet users.
Looking for a practical solution, you can get around your problem by having two separate containers, one on top of each other: one containing the background of the hex, without any contents (applying the correct shape) and one transparent, not rotated or skewed at all, with the actual text. This will bring you the disadvantage of having rectangular links when you probably want hexagonal links.
The second solution, and what I believe it's the proper way to make a hex grid is the clip-path technique, combined with proper margins alignment and possibly doable with flexbox.
Edit:
Here is a trimmed down and simplified version of your example, using clip-path. I tried to keep mods to your initial CSS to a minimum and only removed what was breaking my example. Here's what I did:
removed the skews
fixed responsiveness (paddings, widths and heights - you'll probably want to adjust font sizes line heights and other details yourself)
tried to keep as much as your existing markup and CSS
removed what was breaking responsiveness and simplified a few overly-complex solutions - at least from my perspective
I haven't used any tool to calculate angles. If you want them geometrically perfect you'll want to measure them and fine-tune heights
as a general rule, I tried to demonstrating a principle, not to provide a production ready version - you'll probably need to fine-tune the details
note this technique allows for perfect control over the link areas. Clickable areas are hexagonal and the space between hexagons is not linked.
#import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700');
body {font-family: 'Noto Sans', sans-serif;background-color: #369;}
#hexGrid {
display: flex;
flex-wrap: wrap;
max-width: 840px;
margin: 0 auto;
overflow: hidden;
font-size: 1.1066819197003217rem;
line-height: 1.5rem;
list-style-type: none;
padding: 48px 0;
}
.hex {
position: relative;
outline: 1px solid transparent;
-webkit-clip-path: polygon(50% 0%, 98% 25%, 98% 75%, 50% 100%, 2% 75%, 2% 25%);
clip-path: polygon(50% 0%, 98% 25%, 98% 75%, 50% 100%, 2% 75%, 2% 25%);
background-color: white;
margin-bottom: -7vw;
box-sizing: border-box;
height: 33vw;
}
#media (min-width: 680px) {
.hex {
height: 224px;
margin-bottom: -48px;
}
}
#media (max-width: 600px) {
.hex {
height: 50vw;
margin-bottom: -10.8vw;
}
}
.hex::after {
content: '';
display: block;
padding-bottom: 86.602%;
/* = 100 / tan(60) * 1.5 */
}
.hexIn {
position: absolute;
width: 96%;
margin: 0 2%;
height: 100%;
}
.hexIn * {
position: absolute;
visibility: visible;
}
.hexLink {
display: block;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
overflow: hidden;
border: none;
}
/*** HEX CONTENT **********************************************************************/
.hex h1, .hex p, .hex .icon {
width: 100%;
box-sizing: border-box;
color: #000;
font-weight: 300;
}
.hex .icon {
height: 48px !important;
top: 45%;
display: block;
z-index: 2;
transform: translate3d(0,-100%,0);
}
.hex p {
top: 60%;
z-index: 1;
transform: translate3d(0,-100%,0);
}
.hex h1 {
top: 27%;
transform: translate3d(0,100%,0);
font-size: 20px !important;
letter-spacing: 1px;
}
/*** HOVER EFFECT **********************************************************************/
/*
*.hexLink:hover h1, .hexLink:focus h1,
*.hexLink:hover p, .hexLink:focus p{
* -webkit-transform:translate3d(0,0,0);
* -ms-transform:translate3d(0,0,0);
* transform:translate3d(0,0,0);
*}
*
*/
/*** HEXAGON SIZING AND EVEN ROW INDENTATION *****************************************************************/
#media (min-width:1201px) {
/* <- 5-4 hexagons per row */
#hexGrid {
padding-bottom: 4.4%;
}
.hex {
width: 25%;
/* = 100 / 5 */
}
.hex:nth-child(7n+5) {
/* first hexagon of even rows */
margin-left: 12.5%;
/* = width of .hex / 2 to indent even rows */
}
}
#media (max-width: 1200px) and (min-width:901px) {
/* <- 4-3 hexagons per row */
#hexGrid {
padding-bottom: 5.5%;
}
.hex {
width: 25%;
/* = 100 / 4 */
}
.hex:nth-child(7n+5) {
/* first hexagon of even rows */
margin-left: 12.5%;
/* = width of .hex / 2 to indent even rows */
}
}
#media (max-width: 900px) and (min-width:601px) {
/* <- 3-2 hexagons per row */
#hexGrid {
padding-bottom: 7.4%;
max-width: 640px;
}
.hex {
width: 33.333%;
/* = 100 / 3 */
}
.hex:nth-child(5n+4) {
/* first hexagon of even rows */
margin-left: 16.666%;
/* = width of .hex / 2 to indent even rows */
}
}
#media (max-width: 600px) {
/* <- 2-1 hexagons per row */
#hexGrid {
padding-bottom: 11.2%;
}
.hex {
width: 50%;
/* = 100 / 3 */
}
.hex:nth-child(3n+3) {
/* first hexagon of even rows */
margin-left: 25%;
/* = width of .hex / 2 to indent even rows */
}
}
#media (max-width: 400px) {
#hexGrid {
font-size: 13px;
}
}
<ul id="hexGrid">
<li class="hex">
<div class="hexIn">
<a class="hexLink" href="https://www.microsoft.com/en-us/dynamics365/sales" target="_blank">
<div class="filler"></div>
<svg class="icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/vectors/sprite.svg#strengthandscale"></use>
</svg>
<p>Dynamics 365 for</p>
<h1>Sales</h1>
</a>
</div>
</li>
<li class="hex">
<div class="hexIn">
<a class="hexLink" href="https://www.microsoft.com/en-us/dynamics365/customer-service" target="_blank">
<svg class="icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/vectors/sprite.svg#customer-service"></use>
</svg>
<p>Dynamics 365 for</p>
<h1>Customer Service</h1>
</a>
</div>
</li>
<li class="hex">
<div class="hexIn">
<a class="hexLink" href="https://www.microsoft.com/en-us/dynamics365/operations" target="_blank">
<svg class="icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/vectors/sprite.svg#operations"></use>
</svg>
<p>Dynamics 365 for</p>
<h1>Operations</h1>
</a>
</div>
</li>
<li class="hex">
<div class="hexIn">
<a class="hexLink" href="https://www.microsoft.com/en-us/dynamics365/financials" target="_blank">
<svg class="icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/vectors/sprite.svg#financials"></use>
</svg>
<p>Dynamics 365 for</p>
<h1>Financials</h1>
</a>
</div>
</li>
<li class="hex">
<div class="hexIn">
<a class="hexLink" href="https://www.microsoft.com/en-us/dynamics365/field-service" target="_blank">
<svg class="icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/vectors/sprite.svg#field-service"></use>
</svg>
<p>Dynamics 365 for</p>
<h1>Field Service</h1>
</a>
</div>
</li>
<li class="hex">
<div class="hexIn">
<a class="hexLink" href="https://www.microsoft.com/en-us/dynamics365/project-service-automation" target="_blank">
<svg class="icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/vectors/sprite.svg#project-service"></use>
</svg>
<p>Dynamics 365 for</p>
<h1>Project Service</h1>
</a>
</div>
</li>
<li class="hex">
<div class="hexIn">
<a class="hexLink" href="https://www.microsoft.com/en-us/dynamics365/marketing" target="_blank">
<svg class="icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/vectors/sprite.svg#marketing"></use>
</svg>
<p>Dynamics 365 for</p>
<h1>Marketing</h1>
</a>
</div>
</li>
</ul>
Side notes:
I'm not exactly a fan of responsiveness by percent padding, so I removed part of it, as it was really messing up responsiveness.
from where I see it, your markup and CSS are unnecessarily complex and that's the root of the problem. CSS should be kept as simple and controllable as possible.
I resolved the issue by going in Chrome to SETTINGS>>>ADVANCED>>>SYSTEM and turned off/disabled "Use Hardware Acceleration When Possible". I've seen this type of error before in the XP era - related to certain graphic driver/updates - which affected Adobe reader/full products. Remove the drivers (version translation) component specific to the browser and and the apps will default to the OS settings.
How to add a background image to a font awesome icon?
I want to make the coloring of the icon an image. So instead of it being purple or something, it is the image. I hope that makes sense!
I have this code:
<span class="fa fa-coffee fa-5x coffee" aria-hidden="true"></span>
and the class:
.coffee {
background: url("https://www.dropbox.com/s/xal8sws9h4qy06l/tumblr_n6hoofK5GW1r0hv8uo1_500.gif?dl=1");
}
but this just changes the area around the icon to that image, not the inside.
Here's the whole page, the icon I'm trying to modify is the coffee cup: http://codepen.io/l-emi/pen/QNZevb
Thanks!
You could use background-clip and text-fill-color to achieve this in webkit browsers though it won't work in other browsers unfortunately:
.coffee:before {
background: url("https://www.dropbox.com/s/xal8sws9h4qy06l/tumblr_n6hoofK5GW1r0hv8uo1_500.gif?dl=1");
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
EXAMPLE
As mentioned by Turnip there is -webkit filter for that. However it is more convenient to use SVG: <svg> <pattern id="mypattern" patternUnits="userSpaceOnUse" width="750" height="800"> <image width="750" height="800" xlink:href="https://placekitten.com/g/100/100"></image> </pattern> <text x="0" y="80" class="fa fa-5x" style="fill:url(#mypattern);"></text> </svg> You just need to include icon character in SVG Demo fiddle
If your background is a solid color you could use an inverted SVG icon (where the filled path is the white-space and the main icons are cut/transparent):
html, body {
padding: 0;
margin: 0;
height: 100%;
}
body {
background: #ede1e9;
display: flex;
align-items: center;
justify-content: center;
}
.maskicon {
position: relative;
background: url('http://i.giphy.com/l2QZVskdU1QXM3I1a.gif') no-repeat center;
background-size: cover;
}
.maskicon svg {
display: block;
height: auto;
width: auto;
}
.maskicon svg path { fill: #ede1e9; }
.maskicon.coffee svg { height: 45vh; }
<div class="maskicon coffee">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="782 -846 1856 1792"><path d="M2254-398h-64v384h64c53.3 0 98.7-18.7 136-56s56-82.7 56-136-18.7-98.7-56-136-82.7-56-136-56z"/><path d="M782-846V562h1792c0 70.7-25 131-75 181s-110.3 75-181 75H1038c-70.7 0-131-25-181-75s-75-110.3-75-181v384h1870.9V-846H782zM2525.5 65.5c-75 75-165.5 112.5-271.5 112.5h-64v32c0 61.3-22 114-66 158s-96.7 66-158 66h-704c-61.3 0-114-22-158-66s-66-96.7-66-158v-736c0-17.3 6.3-32.3 19-45 12.7-12.7 27.7-19 45-19h1152c106 0 196.5 37.5 271.5 112.5S2638-312 2638-206 2600.5-9.5 2525.5 65.5z"/></svg>
</div>
jsFiddle: https://jsfiddle.net/azizn/mp7fo9ah/
Having the SVG inside the HTML allows you to easily control its fill color to match the background. You could go further with this and have any HTML content as the background (like text or even video) if you make the SVG element absolutely positioned with a higher z-index.
This requires more maintenance but is compatible with most browsers.
You may also take a look at mix-blend-mode . http://codepen.io/gc-nomade/pen/eZQdEg (or snippet at the bottom of answser)
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
Modification to your CSS :
.coffee {
position:relative;/* to bring it on top */
mix-blend-mode:screen;/* we will blend from black and white colors */
color:black;/* this color will blend */
box-shadow: inset 0 0 0 100px white; /* this will be the mask color */
}
.infobox {/* #infobox should be used only once, so i use a class */
position:relative;/* to position the child */
}
.infobox:before{/* child or pseudo */
content:'';
/* slide it under the .coffebox */
left:50%;
margin-left:-70px;
height:140px;
width:140px;
position:absolute;
/* image to blend with */
background: url("https://www.dropbox.com/s/czz3m5ieucxwbrl/stars.gif?dl=1");
}
modification to your html (where you use unproperly the ID too many times):
<div class="col-md-4 infobox " id="infobox" style="font-size: 28px;">
<span class="fa fa-coffee fa-5x coffee" aria-hidden="true"></span>
</div>
.coffee {
position: relative;
mix-blend-mode: screen;
color: black;
box-shadow: inset 0 0 0 100px white;
}
.infobox {
position: relative;
}
.infobox:before {
content: '';
height: 140px;
width: 150px;
position: absolute;
background: url("https://www.dropbox.com/s/czz3m5ieucxwbrl/stars.gif?dl=1"),
/* see gradient while image loads*/
linear-gradient(45deg, darkblue, white, darkblue, white, darkblue, white, darkblue, white);
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" />
<div class="col-md-4 infobox " id="infobox" style="font-size: 28px;">
<span class="fa fa-coffee fa-5x coffee" aria-hidden="true"></span>
</div>
In your Codepen demo, just replace...
.coffee:before {
background: url("https://www.dropbox.com/s/czz3m5ieucxwbrl/stars.gif?dl=1");
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
... with...
.coffee:before {
background: url("https://www.dropbox.com/s/xal8sws9h4qy06l/tumblr_n6hoofK5GW1r0hv8uo1_500.gif?dl=1");
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Then, https://www.dropbox.com/s/xal8sws9h4qy06l/tumblr_n6hoofK5GW1r0hv8uo1_500.gif?dl=1 will be the background image of your icon.
The problem with the code in your question, is that you were using selector .coffee where you should have been using selector .coffee:before.
Edit :
If you want to use the same background for the wand (as mentioned in the comments below), you could use eg. this selector :
.coffee:before, .fa-magic:before {
background: url("https://www.dropbox.com/s/eg3v313y3fuha9b/ezgif.com-crop.gif?dl=1");
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
add a search icon using FontAwesome icon. searchbox is the div or any tag class name.
.searchbox:before {
position:absolute;
font: normal normal normal 14px/1 FontAwesome;
top: 17px;
left: 20px;
content: "\f002";
}
Table: how to change pictures on mouseover on single rows?
I'm working on a website and I've to create a table with a mouse over effect the effect is only when you go with the mouse on the picture and only on the PDF icon.
What I need now is to apply this effect when you go with the mouse on the single table rows. How can I do it?
HTML:
<td class="thumbnail-item" data-th="PDF"><img src="http://salmenpark-test.nowcommu.myhostpoint.ch/wp-content/uploads/2015/07/pdf.png" alt="PDF" height="24" width="24">
<div class="tooltip">
<img src="qh_1.png" alt="" width="570" height="403" />
<span class="overlay"></span>
<span class="overlay"></span>
</div></td>
CSS :
.thumbnail-item {
/* position relative so that we can use position absolute for the tooltip */
display: inherit;
height: 10px;
max-width: 5px;
}
.thumbnail-item a {
display: block;
}
.tooltip {
/* by default, hide it */
display: none;
/* allow us to move the tooltip */
position: absolute;
/* align the image properly */
padding: 8px 0 0 8px;
z-index: 500;
top: 7px;
left: -8px !important;
max-width: 570px !important;
max-height: 403px !important;
Antionio:
CSS:
.thumbnail-item {
/* delete the line that was here for inheriting the display * /
height: 10px;
max-width: 5px;
}
HTML:
<tr class="thumbnail-item white">...</tr>
<tr class="thumbnail-item grey">...</tr>
etc, etc.
You were adding the "thumbnail-item" css reference to the <td>tag which represents a cell of data. You want the "thumbnail-item" css reference to be on the entire row, so it should be on each <tr> tag instead.
In your Jquery code, use the class of your td.hover function and try with the below code.
$(".thumbnail-item").hover(function() {
//Write your js code what you have written for hover pdf image
});
It would be better for us to understand if you post your jquery code as well.