I tried the solutions here and here with no luck. My css file as it is:
.JFK {
position: relative;
left: 250px;
height: 200px;
width: 200px;
bottom: -45px;
background-image: url(https://media-cdn.tripadvisor.com/media/photo-s/03/9b/2d/f2/new-york-city.jpg);
line-height: 200px;
text-align: center;
}
.JFK a p{
position: relative;
top: -130px;
display: none;
}
.JFK a:hover p{
display: block;
}
.JFK:hover{
opacity: 0.6;
display: block;
}
My html:
<div class = "JFK">
<p>JFK</p>
<p>to</p>
<p>from</p>
</div>
I'm trying to have links appear at the bottom of the image upon hover. The solutions in previous posts have not worked. With my current setup, I cannot see "TO" or "FROM" at all when I load the page.
The hover should be on the .JFK not the .JFK a When you hover over the .JFK it should make the .JFK a p visible.
.JFK:hover a p {
display: block;
}
Here is a link to a jsfiddle with the change: https://jsfiddle.net/efv8ch70/
Hope this helps
.JFK {
position: relative;
top: 50px;
left: 250px;
background-image: url(https://media-cdn.tripadvisor.com/media/photo-s/03/9b/2d/f2/new-york-city.jpg);
}
.JFK,
.JFK > p {
height: 200px;
width: 200px;
}
.JFK > p {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
}
.link-wrapper {
display: none;
}
.JFK:hover .link-wrapper {
display: block;
}
<div class="JFK">
<p>JFK</p>
<div class="link-wrapper">
<span>to</span>
<span>from</span>
</div>
</div>
There are lots of ways to solve this problem. This solution is just an example. The actual paragraph has the same hight as the .JFK so it pushes the .link-wrapper down to exactly the spot you want in the normal flow. Hope this helps or gives you some ideas.
Related
I have the following CSS lines:
.liquid {
display: inline-block;
width: 25px;
height: 25px;
background: #ff8125;
margin-right: 15px;
}
<h2 class="liquid">Liquid</h2>
It should look like this:
http://imgur.com/B9vblUP
But instead looks like this:
http://imgur.com/8RQTkcO
What am i doing wrong here and how to get it exactly like the first pic?
I tried overflow hidden but that only shows Liquid in 25x25 on the block and the rest is not showing.
Any help is much appreciated.
Kind regards,
Majin Buu
I think you should create another element for the orange square instead of editing the class of the h2 element because the background attribute it will be applied on that element, so I would make something like:
<div class="liquid"></div>
<h2>Liquid</h2>
.liquid {
float: left;
width: 25px;
height: 25px;
background: #ff8125;
margin-right: 15px;
}
To have the square floating to the left of the element.
Check out CSS position!
.liquid {
display: inline-block;
position: absolute;
width: 25px;
height: 25px;
background: #ff8125;
}
h2 {
position: relative;
margin-left: 30px;
}
<div class="liquid"></div><h2>Liquid</h2>
Use html like this
<div class="bg_white">
<span class="liquid"> </span><h2>Liquid</h2>
</div>
CSS
.bg_white{background:white; padding:5px; width:auto; float:left;}
.liquid {
display: inline-block;
width: 25px;
height: 25px;
background: #ff8125;
margin-right: 15px;
float:left;
font-size:18px;
}
.bg_white h2{float:left; margin:0px;}
Pseudo element is better for this solution:
h2 {
background: #eee;
padding: 5px;
display:inline-block;
}
.liquid::before {
content:'';
display: inline-block;
vertical-align: middle;
width: 25px;
height: 25px;
background: #ff8125;
margin-right: 15px;
}
<h2 class="liquid">Liquid</h2>
You are styling the font part of the wanted result itself. You should either add an element for the orange square or use a pseudo element. This will get you in the right direction.
.liquid {
line-height: 1;
}
.liquid:before {
background: #ff8125;
content: ''; /* important for pseudo elements */
display: inline-block;
height: .9em;
margin-right: .45em;
position: relative;
top: .1em;
width: .9em;
}
<h2 class="liquid">Liquid</h2>
you can use below CSS for this if text is small and always in one line.
.liquid {
display: inline-block;
padding-left: 10px;
border-left: 25px solid #ff8125;
margin-right: 15px;
font: 25px/25px Arial;
font-weight: bold;
}
<h2 class="liquid">Liquid</h2>
The blocks are being laid out vertically (one on top of the other), I'm trying to use inline blocks to place 2 blocks side by side. I wanted to use inline-block instead of floats which do work. The steps div class is the container for both inline blocks. Am I missing something?
img.down_image {
display: inline-block;
vertical-align: middle;
width: 465px;
}
div.steps {
display: block;
position: absolute;
height: 500px;
top: 50%;
text-align: center;
}
ol {
display: inline-block;
vertical-align: middle;
width: 400px;
height: auto;
padding: 0 0 0 40px;
list-style: none;
overflow: hidden;
counter-reset: numList;
font: 16px sans-serif;
color: #fff;
}
the html:
<div class="steps">
<div class="down_image">
<img src="pic1.png" class="down_image" />
</div>
<ol>
<li>sdsdgsdgsdgsdgsdgsdg</li>
<li>sdgsdgsdgsdgsdg install Java.
</li>
<li>sdgsdgsdgsdgsdg</li>
</ol>
</div>
Add the following in your style
div.down_image {
display: inline-block;
}
You made the image inline, but the container div is not inline!
If you still have same issue, check the widths! Total width of 400 (ol) + 465 (img) = 865px might be more than the area you are using.
This code works fine, when widths are fixed. jsfiddle
Add white-space: nowrap; to div.steps and change html:
div.down_image {
width: 60%;
display: inline-block;
background-color: #ded;
}
div.steps {
white-space: nowrap;
width: 100%;
display: block;
position: absolute;
height: 500px;
top: 50%;
text-align: center;
}
ol {
background-color: #dde;
display: inline-block;
vertical-align: middle;
width: 30%;
height: auto;
padding: 0 0 0 5%;
list-style: none;
overflow: hidden;
counter-reset: numList;
font: 16px sans-serif;
color: #fff;
}
<div class="steps">
<div class="down_image">
</div><ol>
<li> sdsdgsdgsdgsdgsdgsdg</li>
<li> sdgsdgsdgsdgsdg install Java.</li>
<li> sdgsdgsdgsdgsdg</li>
</ol>
</div>
Notice glued </div><ol>
Note: make sure to add div.down_image { display: inline-block; }
Also, you can try to give position: absolute; to image's div and ol.
So I am wanting to change the position of an image that appears with the hover effect. Right now the image kind of just goes under the first image that holds the hover effect. I am struggling with this hardcore. I have tried positioning it and floating it and just simple left:90px or right:90px but the image that shows upon hovering doesn't budge. Here is a jsfiddle. The images are broken but you can get the jist. https://jsfiddle.net/k0fvbcno/ Any help would be greatly appreciated.
<div id="pain1">
<img class="pain1" src="images/painspot.png">
<img class="shoulder" src="images/shoulder.png">
</div>
<div id="pain2">
<img class="pain2" src="images/painspot.png">
<img class="back" src="images/back.png">
</div>
<div id="pain3">
<img class="pain3" src="images/painspot.png">
<img class="hip" src="images/hip.png">
</div>
#pain1 {
position: absolute;
left: 710px;
top: 220px;
margin: auto;
}
.shoulder {
display: none;
}
.pain1:hover + .shoulder {
display: inline;
}
.pain1:hover{
border: 3px solid transparent;
display: block;
}
#pain2 {
position: absolute;
left: 627px;
top: 390px;
margin: auto;
}
.back {
display: none;
}
.pain2:hover + .back{
display: inline;
}
.pain2:hover{
border: 3px solid transparent;
display: block;
}
#pain3 {
position: absolute;
left: 680px;
top: 425px;
}
.hip {
display: none;
}
.pain3:hover + .hip{
display: inline;
}
.pain3:hover {
border: 3px solid transparent;
display: block;
}
I figured it out finally. I needed to use position absolute and that finally enabled me to position the image that appeared when the hover effect was in use. Thanks!
Any ideas how to get the social icons clickable? I know if I remove the main #artistheader the icons become clickable, however that #artistheader has the header BG image.
<!--Begin Artist Header-->
<div id="artistheader">
<div id="artistimage"><img src="../images/ykmfull.png" alt="YKM"></div>
<div id="artistname"><center><img src="../images/ykmName.png" alt="YKM"></center></div>
<div id="artistSocial"><center>
<img src="../images/fb.png" alt="fb" width="50" border="0"><img src="../images/twitter.png" alt="tw" width="50"><img src="../images/insta.png" alt="insta" width="50"></center></div>
<!--artist header end--></div>
I added the relative positioning and z-indexes trying to find a solution weren't originally there.
#artistheader {
position: relative;
z-index: -45;
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#artistimage {
clear: both;
float: left;
margin-left: 8.4249%;
width: 24.1758%;
display: block;
}
#artistname {
clear: none;
float: left;
margin-left: 9.5238%;
width: 41.0256%;
display: block;
margin-top: 7%;
}
#artistSocial {
position: relative;
z-index: 5000;
clear: none;
float: left;
margin-left: 9.5238%;
width: 41.0256%;
display: block;
}
#fb {
position: relative;
z-index: 5000;
clear: none;
float: left;
margin-left: 26.3736%;
width: 32.6007%;
display: block;
}
#tw {
clear: none;
float: left;
margin-left: 1.0989%;
width: 15.7509%;
display: block;
}
#insta {
clear: none;
float: left;
margin-left: 1.0989%;
width: 15.7509%;
display: block;
}
Double instances of #artistheader existed. 1 in the source code on the page and 1 in the CSS. Upon deleting the rule on the CSS and leaving the one in the source code the links worked again. Not sure where the second instance came (one in source code) and I'm it didn't matter which I left but because I have blur effects on the one in source code I kept it. I assume both were conflicting with each other and then just "froze" that section.
I'm trying to overlap images in css. They are both aligned in the center but one is below the other one. I tried z-index'ing which is fine with position: absolute; but if I do that then I lose my centering.
Issue:
The dots are supposed to be over the phone.
My HTML:
<div class="content-top"><div class="cwrap">
<motto>Become Famous On Vine.</motto>
<img id="phone" src="./images/phone.png">
<img id="dots" src="./images/dots.png">
</div></div>
My CSS:
.cwrap {
margin-left: auto;
margin-right: auto;
width: 80%;
}
.content-top {
background-color: #00b589;
height: 650px;
width: 100%;
}
.content-top motto {
display: block;
width: 100%;
text-align: center;
padding-top: 15px;
color: #FFF;
font-size: 60px;
font-family: "Source Sans Pro ExtraLight";
}
.content-top motto {
display: block;
width: 100%;
text-align: center;
padding-top: 15px;
color: #FFF;
font-size: 60px;
font-family: "Source Sans Pro ExtraLight";
}
#phone {
z-index: 999;
}
#dots {
z-index: 1000;
}
.content-top img {
margin-left: auto;
margin-right: auto;
position: relative;
display: block;
}
Try this. position: absolute;, top: 0;, left: 0;
The the red div is semi-transparent to reveal the blue div below.
Now, if you want to center these in the middle of the page, <div class="container"> use css: margin: 0 auto;.
Link to example: jsFiddle
Use on #phone and #dots elements these css attributes: position, z-index, top, and left.
Use position: absolute the upper layer, and the top and left to place the upper layer to the correct location. Use z-index to specify the layer, lower value is backer, bigger value is upper.