I'm trying to word this correctly but as always: I'm a novice so forgive mistakes/confusion.
I have created an iframe that embeds a client's main site within their tumblr, meaning you don' have to leave tumblr to access the site. I did this because the old designer had installed a "latest item in the shop" widget which no longer worked & I wanted similar but the information needed didn't exist anymore.
What I would like is a pop-up or hover over box that says: return to blog or carry on to nameofsite.com. Even the links above the iframe would be adequate for now but I can't think how to do it without messing with the appearance of the embedded site.
http://2000adonline.tumblr.com/website
As usual, I think I have developed a wildly complicated issue when a simple redirect would have sufficed! Ah well! Thanks for your time.
A pop-up can be made for the i-frame, but it can only be for the whole i-frame, not elements inside of it. To make a pop-up, wrap the i-frame and pop-up HTML in a <div>:
<div id="iframe">
<iframe src="http://www.w3.org"></iframe>
<div class="over">Return to blog or carry on to nameofsite.com</div>
</div>
Then you need to style the iframe and pop-up:
iframe{
width:500px;
height:500px;
}
#iframe:hover .over{
opacity:1;
}
.over{
opacity:0;
position:absolute;
top:0px;
left:0px;
background:red;
width:100%;
height:40px;
-o-transition:.3s;
-ms-transition:.3s;
-moz-transition:.3s ;
-webkit-transition:.3s;
transition:.3s ;
}
#iframe{
position:relative;
width:500px;
}
When the div #iframe is hovered over, the pop-up fades in at the top.
See this working JSFiddle Example
Related
So basically what I want to do is this:
Lets take this svg as an example:
https://www.freepik.com/free-vector/blank-screen-laptop-gadget-icon-white-background_9306518.htm
What I want to do in my next.js project is following:
Put my own code inside the "monitor" area of this notebook.
Also make this responsible
So I need a good way to display the notebook and then I create my own div thats the same height and width as the notebook screen and I can put anything else I want into it (paragraphs, h1 etc). So it seems that my code / page appears directly onto the notebook screen.
What is the best way to achieve this?
I heard about clip-path but I wasn't able to wrap my head around this.
Or no SVG at all
Make the laptop PNG screen transparent, and position it over your content
<style>
#LAPTOP{
position:relative;
overflow:hidden;
width:300px;
height:200px;
}
#SCREEN,#BORDER{
position:absolute;
}
#SCREEN{
margin:1em;
margin-left:3em;
}
#MAP{
zoom:.5;
}
#BORDER{
width:100%;
height:100%;
z-index:999;
}
</style>
<div id="LAPTOP">
<div id="SCREEN">
<b>Hello World!</b>
<img id="MAP" src="//lh3.googleusercontent.com/proxy/7OrKxhEgjUlMNO280hA_iums8CxNpExIwZARBhDjhboAEgof-YYF7s4I9di1HREv3QKyzadoXZ74PlelwJ7ejpLBl5lXRto">
</div>
<img id="BORDER" src="https://i.ibb.co/yd47GPy/laptop-screen.png">
</div>
So, I had a difficult time trying to figure out why a couple of my links were not clickable. I finally figured out that they just needed a 'higher' z-index. I don't really understand why they needed that in order to work though. I'm figuring out (through google-research) that some elements can be 'covered' by other elements. I don't understand how that happened in my code, in particular, and kind of still confused about that whole concept of some elements 'covering' others. Can anyone explain? Here's the relevant HTML and CSS, respectively: (I had trouble with the elements within )
HTML:
<section id="nav_images">
<img id="skull" class="reflectBelow" src="ScumSkull.jpg" alt="Click for scoop" height="94" width="94"/>
<img id="staff" class="reflectBelow" src="ScumStaff.jpg" alt="Click for staff" height="94" width="94">
<img id="bulbs" class="reflectBelow" src="ScumBulbs.jpg" alt="Click for sermons" height="94" width="94">
</section>
<aside id="don8">
<p id="don_P">Make a Donation to Scum</p>
<img id="donate" src="donate.gif" alt="Donate button" height="47" width="147">
</aside>
<aside id="slogans">
<h3>Top Five Rejected Scum of the Earth Slogans</h3>
<p id="slogan_5" class="slogan">5. Emerging from the emergent church</p>
<p class="slogan">4. Our congregation can kick your congregation's ass</p>
<p class="slogan">3. Same old evangelical crap, different package</p>
<p class="slogan">2. Come to see the crazy bathrooms, stay for a sermon</p>
<p class="slogan">1. And you thought mega-churches sucked</p>
</aside>
CSS:
body
{
background-color:#000000;
margin:0;
padding:0;
font-size:100%;
width:100%;
}
main
{
display:block;
max-width:700px;
margin:40px auto 300px auto;
height:650px;
}
img
{
padding:0;
margin:0;
border:none;
float:left; /* Gets rid of space between images */
}
#don8
{
clear:left;
float:right;
position:relative;
top:50px;
width:250px;
height:140px;
border-left:13px solid red;
}
#don_P
{
width: 60px;
position:relative;
top:-10px;
left:60px;
text-align:center;
z-index:2;
}
#don_P a:link, a:hover, a:focus
{
text-decoration:none;
color:white;
}
#donate
{
position:relative;
top:-10px;
left:20px;
z-index:2;
}
#slogans
{
clear:left;
position:relative;
top:50px;
left:35px;
/* border-right: 5px solid red; */
}
.slogan
{
margin-top:0;
margin-bottom:0;
line-height:160%;
}
#slogan_5
{
margin-top:10px;
}
Unless I'm missing some CSS, your links are not covered. Their color turn white on :hover.
#don_P a:link, a:hover, a:focus { color: white; }
The following link shows a nice picture of what it looks like when the 'layer' is visible and overlapping another layer. This 'overlapping' will happen primarily when you force how the browser should render an item by specifying the coordinates where the item should be placed on the page.
http://www.w3.org/wiki/CSS/Properties/z-index
A convenient way to observe how the browser has layered your HTML, you can use Google Chrome developer tools. Open the page in Google Chrome browser, then Right click on the element in question and select "Inspect Element". This will give you a view of the boundaries of that element.
Pretty much all modern browsers have this 'element inspector' feature somewhere. Firefox also has this feature in their dev tools, but also has a fancy tool that can also do this, but in 3D:
https://developer.mozilla.org/en-US/docs/Tools/3D_View
I looked over your code and I see the overlap.
Your problem is that this:
<aside id="slogans">
<h3>Top Five Rejected Scum of the Earth Slogans</h3>
<p id="slogan_5" class="slogan">5. Emerging from the emergent church</p>
<p class="slogan">4. Our congregation can kick your congregation's ass</p>
<p class="slogan">3. Same old evangelical crap, different package</p>
<p class="slogan">2. Come to see the crazy bathrooms, stay for a sermon</p>
<p class="slogan">1. And you thought mega-churches sucked</p>
</aside>
is appearing on top of
<aside id="don8">
<p id="don_P">Make a Donation to Scum</p>
<img id="donate" src="donate.gif" alt="Donate button" height="47" width="147">
</aside>
Here is an analogy. Imagine if you have two sheets of paper stacked on top of each other. When you bring your pen down on them, it only touches the top one.
This is the same for your mouse pointer. When you click on the page, you click on the top element. In your case, the top element isn't the link so you can't click on it.
There are two solutions to this problem.
Limit the width the the overlapping object so it no longer overlaps.
Give your elements z-indexes and position the link on top.
If you are unclear how z-indexes work here is a good link:
http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
To put it simply, elements with a higher z-index are positioned above elements with lower one. If there is no z-index, the browser just decides.
Fiddle: http://jsfiddle.net/FtQ4d/1/
I'm doing a project for class, and I've made a webpage where there is a title in the center and two images of a left and right hand underneath. Upon hovering over one of the hands, it will move off of the screen revealing a link underneath. I've got the link hidden under the hands, but when the hand moves, the link is not clickable. How can I make it so?
Here are the relevant parts of the html and css:
<body>
<p id="rsm">(view my resume.)</p>
<div id="ind_wrap">
<p id="ind">INDEX.HTML</p>
<img src="r_hand.png" id="r_hand"/>
<img src="l_hand.png" id="l_hand"/>
</div>
</body>
CSS:
#r_hand{
background-image:url("rhand.png");
margin-top:-28%;
margin-left:50%;
height:100%;
width:35%;
animation:fr_bottom 4s 1;
}
#r_hand:hover{
animation:m_right 4s 1;
}
#l_hand{
margin-top:-52%;
margin-left:8%;
height:100%;
width:35%;
animation:fl_bottom 4s 1;
}
#l_hand:hover{
animation:m_left 3s 1;
}
#rsm{
margin-top:40%;
margin-left:20%;
position:absolute;
z-index:-1;
}
So, #rsm is the link underneath that is revealed when the left hand moves out of it's way, but it is not clickable. How can I fix this?
The problem is the z-index value on #rsm. On hover change it to more positive so that it is rendered above all others
As Arun mentioned in his answer, the z-index is responsible for this however a simple hover didn't work (I assume you don't want to use js).
Are you using Firefox or Chrome? This might be somehow related to your problem.
Also if you are centering elements please use margin: 0 auto; instead of manually tinkering with percentages to fit your screen size. I would also recommend you only use percentages for width not height as it may yield unexpected results on different screen dimensions.
Edit:
I hadn't realised the code in the fiddle is different from the one you posted. I also updated my answer.
I have an image we're using for navigation at the top of a website. I used to set links for each section of the banner. I want to an achieve an opaque effect on hover for each part of the image. Is this possible? Thanks much, Dane.
You could slice the image into seperate images; one for each roll over, the image would still appear to be one image but would have different sections; for the hover you could then either use javascript or have it replace the image with another that appeared opaque
This site shows both the JS method and the CSS method...
http://www.webvamp.co.uk/blog/coding/css-image-rollovers/
just repeat it for each part of the image
You can have a div over each section. Each div would call a javascript event. This even can change the div's style. Something like this:
<javascript>
function changeCss(getId){
var getDiv = document.getElementById(getId)
getDiv.className ="myHover"
}
</javascript>
<styles>
.plain{
width:150px;
height:200px;
position:absolute;
top:0;
left:0;
z-index:1000;
background-color: #666699;
}
.myHover{
width:150px;
height:200px;
position:absolute;
top:0;
left:0;
z-index:1000;
background-color: #666699;
filter: alpha(opacity=80);
}
</styles>
<div onMouseOver="changeCss(this.id)" id="wait" class="plain">
<img src=""/>
</div>
This is just free hand and has not been tested. Give it a try and let me know if there are any issues.
I cannot get this link to be clickable for the life of me. When I take it outside of the 'lb' div it functions. I've applied z-index values and it doesn't change anything. I'm about to rip my hair out. Some help, please.
<div id="lb">
<div id="cntct">
<div id="map">
This is a link
</div>
</div>
</div>
CSS
#lb
{
position:relative;
top:-50px;
z-index:-20;
background-image:url(../src/images/Lbkg.jpg);
background-repeat:no-repeat;
height:650px;
overflow:auto;
}
#cntct
{
position:relative;
top:70px;
background-image: url(../src/images/cntct.png);
background-repeat:no-repeat;
background-position:center;
height:400px;
width:1000px;
margin:auto;
z-index:-10;
}
#map
{
position:relative;
top:45px;
left:50px;
width:600px;
height:400;
z-index:5;
}
try taking the top style off it - hard to tell with only the code you have posted, but it may be pushing it out of the div, meaning that something else (that is transparent) is overlaying it, and intercepting the click.
If you're using firefox/chrome/etc, you can try to right-click on the link, and inspect element (or similar command) - should open the DOM browser with the element you clicked on selected. If the link isn't selected in the DOM (ie some other element is selected) then that element is on top of the link, intercepting clicks...
Please try it:
Remove z-index property for #lb and #cntct.