Some time ago i've seen websites where using cool transparency effect on mouseover.
How to make transparent element so when you hover on website background you can see an image underneath that area ?
Cant find any information on this, please help :)
OK some strategy and some example.
The strategy:
place a background
place some blocking over it
make a div with the same background
if the mouse moves, move this div
if the div moves, move the background to the negative position of the main background..
Example:
$(function(){
$(document).mousemove(function(e){
var x = e.pageX;
var y = e.pageY;
var $t=$(".transfier");
var newLeft =x-$t.width() / 2;
var newTop= y-$t.height() / 2;
$t.offset({
top: newTop,
left: newLeft
});
$t.css('background-position-x', 0 - x + $t.width() / 2);
$t.css('background-position-y', 0 - y + $t.height() / 2);
});
});
body {
background: url(https://wallpaperscraft.com/image/height_canyon_retina_81205_3840x2400.jpg);
background-position: 0px 0px;
background-repeat: no-repeat;
margin: 0px;
}
.transfier {
background: url(https://wallpaperscraft.com/image/height_canyon_retina_81205_3840x2400.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
position: absolute;
left: 0px;
top: 0px;
width: 200px;
height: 200px;
border: 2px solid green;
}
.blockMyView {
background-color: white;
width: 75%;
height: 300px;
border: 1px solid black;
margin: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="transfier"> hoi </div>
<div class="blockMyView"></div>
Related
UPDATE
Here is a jsFiddle with the image and hover event.
I have a sprite image containing 4 "button" images each 30px x 60px - so the total image size is 60px x 120px. Each button is displayed using its proper background offset in the css as shown below.
I want to increase the clickable area of each button, but if I increase padding for the image, more of the image will show than contained in the defined width and height. Can I increase padding or use some other method where the image is still constrained to the amount in height and width?
I do have a containing a tag. I am able to increase the clicking area of the buttons by padding the a tag, but I still need to give feedback via the img hover that the mouse is in the clickable area.
img.prev{
background:url(../img/buttons.gif) no-repeat 0px 0px scroll;
width: 30px;
height: 60px;
}
img.prev:hover{
background-position: 0px -60px;
}
img.next{
background:url(../img/buttons.gif) no-repeat -30px 0px scroll;
width: 30px;
height: 60px;
}
img.next:hover{
background-position: -30px -60px;
}
OK - I think I've got an answer. It seems I can increase the padding of the containing a tag to increase the clicking area and then use the hover event of the a tag to set the background for the img. The following css is for the containing a tags.
Please let me know if there is a better or another solution.
#a-next{
padding-left: 30px;
padding-bottom: 200px;
}
#a-prev{
padding-right: 30px;
padding-bottom: 200px;
}
#a-next:hover > img{
background-position: -30px -60px;
}
#a-prev:hover > img{
background-position: 0px -60px;
}
the pseudo will do . https://jsfiddle.net/mgggf5vo/6/
catch hover from the link, so it includes the pseudo area.
Te correct attribute for links is title, not alt.
a {
display: inline-block;
position: relative;
vertical-align: middle;
cursor:pointer;/* href is missing */
}
a:before {/* give it any size */
content: '';
position: absolute;
height: 60px;
width: 50px;
margin-left: 29px;
}
a[title="next"]:before {
right: 29px;
}
img.prev {
background: url(http://www.waldorfteacherresources.com/img/slideshow-buttons-large.gif) no-repeat 0px 0px scroll;
width: 30px;
height: 60px;
padding: 0;
}
a:hover img.prev {
background-position: 0px -60px;
}
img.next {
background: url(http://www.waldorfteacherresources.com/img/slideshow-buttons-large.gif) no-repeat -30px 0px scroll;
width: 30px;
height: 60px;
padding: 0;
}
a:hover img.next {
background-position: -30px -60px;
}
<div>
<a title="prev">
<img src="http://www.waldorfteacherresources.com/img/blank.gif" alt="prev" class="prev">
</a>
Something Here
<a title="next">
<img src="http://www.waldorfteacherresources.com/img/blank.gif" alt="next" class="next">
</a>
</div>
I have a button class styled in css, in which background image is used, like this:
.button {
display: block;
background-position: center;
background-size: 30px 28px;
background-repeat: no-repeat;
background-color: transparent;
border: 0;
width: 100%;
background-image: url('foo.png');
}
The shape in .png is really simple - it's just an orange circle. So I want to draw it in css instead, to avoid using external asset. So I thought of using the following css object (which draws an orange circle):
#circle {
width: 100px;
height: 100px;
background: orange;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
Is there some way to use that in such a way, that it would behave exactly as the background-image .png? (I know I could just make another button class in which I would have drawn the button differently but I want to reuse the button class already available).
This can be achieved using a pseudo element, I made a fiddle. You can play with the dimensions of course.
.button {
display: block;
border: 0;
width: 300px;
height: 200px;
position: relative;
background: transparent;
/* just to show where the button is */
border:1px solid #000;
}
.button:before {
content: '';
display: block;
background: orange;
border-radius: 50%;
height: 100px;
width: 100px;
/* make sure background is behind text */
z-index: -1;
/* center circle in button, negative margins = half of circle dimensions */
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
}
How about using SVG in a data URI? Here's a fiddle showing the example and the code used to generate it (the link is just 194 characters long):
var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="30" height="28">'
+ '<ellipse cx="15" cy="14" rx="15" ry="14" fill="orange"/></svg>';
location.href = 'data:image/svg+xml;base64,' + btoa(svg);
Through help on stackoverflow I've been able to generate and position a CSS triangle in the correct position on my website, I've also learnt how to color a triangle in 2 equal halves.
But I am stuck on merging the two examples together, what I've tried I don't think is worth pasting here due to the mess I've made of it.
I am trying to get a triangle that has the proportions and sits at the bottom of the div like this fiddle example and then is split in 2 colors like this fiddle example.
Where I believe I am going wrong is that in the different fiddles there are different uses of:
:before
Well..., Here is my attempt to achieve this effect (proportions + split in 2 colors):
JSFiddle Demo.
In this demo, I added the triangle to the .bottom div and positioned that to stay at the top (with a negative value).
Then added margin-top: 1%; property to move the triangle when resizing the window:
HTML
<div class="top"></div>
<div class="bottom">
<div class="triangle"></div>
</div>
CSS:
.top {
/* other styles... */
position: relative;
z-index: 2;
}
.bottom {
background: lightGreen;
height: 100px;
position: relative;
z-index: 1; /* A lower z-index value than .top */
/* Or use overflow: hidden; instead */
}
.triangle {
width: 40px;
height: 20px;
position: absolute;
left: 0;
right: 0;
top: -20px;
margin: auto;
margin-top: 1%; /* Move the triangle when resizing the window */
z-index: 1;
}
.triangle:before {
content: " ";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 20px 20px 0;
border-color: transparent blue transparent transparent;
}
.triangle:after {
content: " ";
position: absolute;
left: 20px;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 20px 0 0;
border-color: red transparent transparent transparent;
}
I am having a very hard time understanding what I have to change in order to impact the size of this CSS triangle (as originally defined on this stackoverflow entry). I am looking for the same effect but about 50% smaller triangle.
I noticed in the referenced stackoverflow post #DanielD noted the following:
1) (padding-left + width)/padding-top = (border-left + border-right)/border-top = base/height
2) margin-left = -border-left = -border-right
3) margin-top = -border-top
4) width = padding-left
But when I try to follow this I get completely muddled.
This is the current code I have:
Fiddle
HTML:
<div class="top">
<div class="triangle-down"></div>
</div>
<div class="bottom"></div>
CSS:
.top
{
background: pink;
height: 100px;
position: relative;
}
.bottom
{
background: lightGreen;
height: 100px;
}
.triangle-down{
width: 3%;
height: 0;
padding-left:3%;
padding-top: 2%;
overflow: hidden;
position: absolute;
left:0;right:0;
margin:auto;
top: 100px;
z-index:1;
}
.triangle-down:before {
content: '';
display: block;
width: 0;
height: 0;
margin-left:-50px;
margin-top:-33px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 33px solid pink;
}
If you change: padding-left:1.5%;
padding-top: 1%; within the triangle-down it should change the size to half of what you originally had.
Updated Fiddle to also change width: 1.5%;
I hope this is what you were looking for.
Try this
Since the triangle is made solely of borders, you have to affect each of the borders of the :after elements. Then you have to compensate for the change in size by changing the margin-top and margin-left values
.triangle-down:before {
content: '';
display: block;
width: 0;
height: 0;
margin-left:-25px;
margin-top:-25px;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-top: 25px solid pink;
}
I'm trying to make a container that has an upward arrow attached to it. I am familiar with the border drawing trick and think that's a likely solution, but it only works for known sizes I think, since you have to specify border in em or px.
The shape I would like to make is this:
.
/ \
/ \
/ \
| flex |
| |
Where the content area can flex to different sizes as a percentage of a parent container.
Here is the CSS, with the problem area flagged:
.metric {
display: inline-block;
position: relative;
height: 150px;
width: 50%;
background: lawngreen;
}
.metric:after {
position: absolute;
top: -25px;
left: 0;
content: '';
background: white;
width: 100%;
height: 0;
border: 75px solid white; /* this fixed width is the problem */
border-top: none;
border-bottom: 25px solid lawngreen;
box-sizing: border-box;
}
Here is the jsfiddle: http://jsfiddle.net/C8XJW/2/
Do you guys know any way to pull this off?
Here is another posibility.
This one does the trick with gradient backgrounds. You need 2 of them, so that the diagonal is easily achieved:
Relevant CSS:
.metric:before, .metric:after {
position: absolute;
top: -25px;
content: '';
width: 50%;
height: 25px;
}
.metric:before {
left: 0px;
background: linear-gradient(to right bottom, transparent 50%, lawngreen 50%);
}
.metric:after {
right: 0px;
background: linear-gradient(to left bottom, transparent 50%, lawngreen 50%);
}
Updated Fiddle
The differences with Simple As Could Be solution:
Pro Transparent corners (relevant if you have a background)
Con Worse browser support
Here's one great solution. Bascially, you make the arrow always centered, and bigger than you'd ever need it, but lop off the overflow.
Here's the JSFiddle:
http://jsfiddle.net/nBAK9/4/
And here's the interesting code:
.metric:after {
position: absolute;
top: 0;
left: 50%;
margin-left: -250px; /* max expected width /2 */
content: '';
background: white;
width: 500px; /* max expected width */
height: 0;
border: 250px solid white; /* max expected width /2 */
border-top: none;
border-bottom: 50px solid #cf6; /* This size adjusts the slope of the triangle */
box-sizing: border-box;
}
Not sure you can, I played with it found that since em inherits from parents you can play a bit with it.
body{
font-size: 3em;
}
div {
width: 0;
height: 0;
border-style: solid;
border-width: 0 3em 4em 7em;
border-color: transparent transparent #007bff transparent;
-webkit-transform:rotate(360deg)
}
Fiddle
.top-arrow:before, .top-arrow:after {
position: absolute;
top: -25px;
content: '';
width: 50%;
height: 25px;
}
.top-arrow:before {
left: 0px;
background: linear-gradient(to right bottom, transparent 50%, black 50%);
}
.top-arrow:after {
right: 0px;
background: linear-gradient(to left bottom, transparent 50%, black 50%);
}
<div class="top-arrow"></div>