i've just made social media icons for my website. i wanted to look them a bit more interesting, so i put overlays on them, which appears, when you moving the hover over it.
i've tried to use
#bla:hover {
background-image: overlay.png;
}
but it didn't worked. Link here: http://tdfts.com/projects/akvile_test/
I also tried this (sorry i cannot really explain :D): http://tdfts.com/projects/akvile_test/website/
But this still did not work well, and looked awful in ie and ff.
do not mind the position of the social media bar.
the overlay should have a transition.
thank you in advance
Demo ..
CSS
.social-item{
width: 40px;
height: 40px;
position: relative;
cursor: pointer;
float: left;
margin: 5px;
}
.social-item .original{
width: 100%;
height: 100%;
}
.social-item .over{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.social-item:hover .over{
opacity: 1;
}
HTML
<div class="social-item">
<img src="http://tdfts.com/projects/akvile_test/website/img/socialmedia/fb.png" class="original" />
<img src="http://tdfts.com/projects/akvile_test/website/img/socialmedia/fbhover.png" class="over" />
</div>
<div class="social-item">
<img src="http://tdfts.com/projects/akvile_test/website/img/socialmedia/twitter.png" class="original" />
<img src="http://tdfts.com/projects/akvile_test/website/img/socialmedia/twitterhover.png" class="over" />
</div>
<div class="social-item">
<img src="http://tdfts.com/projects/akvile_test/website/img/socialmedia/google.png" class="original" />
<img src="http://tdfts.com/projects/akvile_test/website/img/socialmedia/googlehover.png" class="over" />
</div>
Hope this will help you ..
According to your style above, instead of that you should use
#bla:hover {
background-image: url('overlay.png');
}
The url inside should have the correct location.
Regarding the position, you need to make the div which contain the overlay.png should be absolute. [position: absolute; top: 0;]
And make sure the parent a should be relative or absolute
You have
#fb {
height: 40px;
width: 40px;
background-image: url(img/socialmedia/fbhover.png);
}
in your style.css (line 72) thats causing the background-image to be applied automatically. Instead, you would want something like:
#fb {
height: 40px;
width: 40px;
}
#fb:hover {
background-image: url(...);
}
However, I doubt this is what you want. Setting a background-image on an <img src="foo.png"> will just show the background-image behind foo.png, and I'm guessing you want to replace the image entirely.
So you have two options:
1) Easier: Use jQuery's .hover() and .attr("") change the src of the <img> with Javascript.
2) Harder / Uglier (but doesn't require JS): Make two divs, one on top of the other. Make your default image be on the bottom and the hover one be on the top. Set the top div's opacity to 0 and then do a CSS :hover selector that changes the top div's opacity to 1. Frankly, I'd go with the first option.
You can apply some css like I did for facebook overlay
#overlayfb {
position: absolute;
height: 40px;
width: 40px;
z-index: 1;
background-image: url(img/socialmedia/fbhover.png);
top: -25px;
}
top in -25px;
use this
#overlayfb:hover {
top: -25px;
}
I think it will work for you
Related
I'm making a website in wordpress.com and I'm trying to figure out how to control where an image is placed? Currently I can only place an image below or above another and it looks really messy. Is there a way to control the coordinates using html or CSS? Preferably html because I want different positions for different images.
Here is the code of my images so far:
.container {
position: relative;
width: 400px;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.projeto01 {
color: white;
font-size: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
<div class="grid-portefolio">
<div class="container">
<img src="https://insert1australia.files.wordpress.com/2021/04/real-sinister-minister-14-250x250-1-1.png" class="image" alt="Albert Lee Banks Electorate"/><div class="overlay"><div class="projeto01">Albert Lee<br>Banks Electorate</div></div>
</div>
Also note that I'm a beginner at programming. The code above is a mix of templates I found online and some help from a friend.
You can use margin property of css, or I tried it myself, and there might be some other css code overlapping yours since when I changed the width of my three images, they appeared on one line
Edit: #MrMcGoofy, the example code is:
<!DOCTYPE html>
<html style="background: black;" lang="en-US"><head>
<title>TITLE</title>
<style>
#one{
/*Add the css you want, but this one wouldn't need margin*/
}
#two{
margin-bottom: /*Play around with the value until you get the desired result , also try to change the margin-bottom to margin-top/left/right*/;
}
#three{
margin-bottom: /*Play around with the value until you get the desired result, also try to change the margin-bottom to margin-top/left/right*/;
}
</style>
</head>
<body>
<img src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293__340.jpg" alt="1.jpg" width="40%" id="one">
<img src="https://cdn.pixabay.com/photo/2015/09/09/16/05/forest-931706__340.jpg" alt="2.jpg" width="40%" id="two">
<img src="https://cdn.pixabay.com/photo/2015/10/12/14/59/milky-way-984050__340.jpg" alt="3.jpg" width="40%" id="three">
</body>
</html>
try to use in your image tag position:absolute; and then use top and left;
for example give top:50px; and left:100px; see what happens, play around with this...good luck
and you can check this to see where i am coming from:
https://css-tricks.com/absolute-positioning-inside-relative-positioning/
About size it's all about width and height properties, and about position. I think it depends on your website layout, but you can also use top, right, left, bottom.
Hope I helped you enough.
I've created a div-circle in which I want to hold (1) an image and (2) three div-waves (see image). My solution is working on desktop with Chrome, Firefox, Microsoft Edge, Internet Explorer. However, on my iPhone, the overflow doesn't work at all, either in safari or chrome. Here's an image of the difference in result. The relevant HTML looks like this:
<div class="circleContainer">
<div class="wavesContainer">
<div class="wave1" />
<div class="wave1" />
<div class="wave1" />
</div>
<img />
</div>
And the relevant CSS code looks like this:
.circleContainer {
border-radius: 300px;
height: 200px;
width: 200px;
background-color: #232323;
overflow: hidden;
position: relative;
border: #404040 solid 4px;
background-image: URL("pathToBackgroundImage");
background-size: 300px;
background-position: -20px;
transition: .5s;
opacity: 1;
}
.wavesContainer {
transition: .5s;
opacity: 1;
}
.wave1,
.wave2,
.wave3 {
position: absolute;
bottom: 0;
left: 0;
width: 400px;
}
.circleContainer img {
height: 220px;
top: 28px;
left: 18px;
opacity: 1;
transition: .5s;
position: absolute;
}
NOTE: The HTML and CSS are simplified, but I think the code above is all that is necessary to solve this issue.
Here is the code if you want to see it for your self: https://github.com/rrudling/rudling-tech/tree/main/src/components/pages/HomePage/ImageAnimation and here is the live demo: https://rudling-tech.web.app/
I am pretty experienced with CSS and still nothing I've tried work, so you guys are my last hope. I appreciate all the help I can get!
I solved this with a rather brute-force solution. Namely to create a rectangular shape (the red one in this image) with a transparent circle cut, as seen in this thread. I could then hard code some of the z-indices such that the rectangle only hides what I want it to. I also added a new circle with a border (the green one in this image) so I could keep the border around the circle.
It wasn't the solution I was hoping for, but it fully solved my problem!
If you take a look at my test website here you will see that the "Scroll Down" button is overlapping all my content, no matter what z-index I input. Is there a way to fix this issue? I realize that my position is absolute and that is most likely the issue, but if I state it as relative it is no longer set at the bottom of my page.
#scroll-down {
height: 53px;
width: 100%;
display: table-cell;
position: absolute;
color: #fff;
padding-top: 20px;
padding-bottom: 20px;
bottom: 0;
left: 0;
z-index: inherit;
vertical-align: middle;
background-color: rgba(0, 0, 0, 0.5);
cursor: pointer;
transition: all 0.25s ease-in-out;
}
#scroll-down:hover {
color: #bae9ff;
background-color: #fff;
}
<div class="site-wrap">
<div class="background-image img-home">
<div class="text">Welcome!</div>
<a id="scroll-down noselect">
<div id="scroll-down">Scroll Down
<br />
<object class="scroll-down-img" height="33" width="50"></object>
</div>
</a>
</div>
z-index becomes effective only for elements that have attribute position with value absolute or fixed or relative. Elements with position: static (which is the default for all elements) will not be affected by the z-index.
Easiest way in your case, add position: relative to .header, so your header tag becomes like this:
.header {
width: 100%;
background-position: center;
background-repeat: no-repeat;
z-index: 1000;
position: relative;/* this will fix it */
}
If you want to push your scroll div under the header then use z-index:999 in .top-bar class so top-bar will come above the scroll bar text and you are done.
.top-bar {
z-index:999;
}
The problem you have is with "Object" tag. Tags like OBJECT, EMBED,FRAME (and SELECT in some previous browser versions) are rendered as part of window model and does not respect z-index. The classic approach is to put the top content in iframe. In your case I can not understand why you need Object tag for simple button. Just change it with image.
I have two elements in a div, an image that fades in and some text that changes color, but I am unable to get them to transition at the same time. In other words, the mouse can only be over one or the other.
I tried to put the properties in the div that contains them, but that did not help.
JSFiddle example
HTML:
<div id="selectors">
<div id="omselector">
<a href="stills.html">
<img class="noglow" src="images/stills/oldcog.png" alt="Old Work!">
<img class="glow" src="images/stills/oldcogglow.png" alt="Old Work">
<p class="button">OLD WORK</p>
</a>
</div>
</div>
CSS:
.button
{
float: bottom;
width: 350px;
font-size: 20pt;
text-align: center;
font-weight: 900;
color: #FFFFFF;
left: 0;
top: 200px;
-webkit-transition: color 1s;
-moz-transition: color 1s;
-o-transition: color 1s;
transition: color 1s;
z-index: 6:
}
.button:hover
{
color: #0df400;
}
#omselector
{
position: absolute;
height: auto;
width: 300px;
top: 40%;
left: 25%;
z-index: 7;
}
.glow, .noglow
{
width: 250px;
height: 250px;
position: absolute;
left: 70px;
}
To simultaneously change the styling of both elements on a mouse event, you can take advantage of the parent element's mouse event and use #omselector and its :hover pseudo class in the selectors.
For example:
#omselector:hover .button {/*...*/}
#omselector:hover .glow, .noglow {/*...*/}
See JSFiddle demo based on your own.
Try this fiddle
One thing to note is that, try to position the images and the text inside the #omselector so they both receive the hover event. (Notice this wouldn't work of you hover over from the left side.
I have a few pictures in a table that they work as a link and in hover a play button should appear over them.
I tried many different tricks but they all have problems which dont work properly. I decieded to share my question here to find an standard solution.
Here is what I have done so far:
img{
position: relative;
}
img:hover:before {
background:url(http://i40.tinypic.com/i3s4dc.png) no-repeat center center;
content:"";
width: 100%;
min-height: 100px;
position: absolute;
left: 0;
}
I dont know if I am in the right direction or not, but have a look at the demo http://jsfiddle.net/jmXdh/8/ and if it is wrong then please let me know any other way.
You unfortunately can't use the ::before and ::after pseudo-elements with replaced elements. The content of all replaced elements is outside the scope of CSS.
From the Generated and Replaced Content Module (WD):
Replaced elements do not have '::before' and '::after' pseudo-elements; the 'content' property in the case of replaced content replaces the entire contents of the element's box.
Here's something that might work, assuming you can add additional markup:
http://jsfiddle.net/isherwood/jmXdh/11/
a {
display: inline-block;
overflow: hidden;
position: relative;
}
a:hover .play {
background:url(http://placehold.it/80x80) no-repeat center center;
opacity: 0.8;
position: absolute;
width: 80px;
height: 80px;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -50px;
}
<a href="/">
<div class="play"></div>
<img class="img" src="http://i42.tinypic.com/2v9zuc1.jpg" />
<br />
<b>Video test</b>
</a>
Or with a transition effect:
http://jsfiddle.net/isherwood/jmXdh/12/
.play {
opacity: 0;
transition: opacity 0.3s;
}
a:hover .play {
opacity: 0.7;
}