I am trying to position a Twitter follow-button on top of a background splash image using:
<style>
div.splash
{
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.twitter-follow-button
{
position: absolute; [Edit: Copy and paste error. This used to read "position: relative"]
top: 0px;
left: 0px;
}
</style>
<div class="splash">
<img src="image_1.png">
<a href="https://..." style="position: absolute; top: 320px; left: 225px;">
<img src="image_2.png">
</a>
Email
Link
<a href="twitter_handle" class="twitter-follow-button" data-show-count="false" data-dnt="true">
Follow #twitter_handle
</a>
</div>
But I cannot get the Twitter anchor to share space with the splash image. Putting style="..." code in the Twitter anchor tag does not work either, even though it does for the other two anchors, one of which also displays an image.
EDIT:
This is the script Twitter provides for this button:
!function(d,s,id)
{
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id))
{
js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js,fjs);
}
}
(document, 'script', 'twitter-wjs');
I rearranged your code somewhat. I don't know what your splash image so i have just used one of my own. Here is my latest fiddle
#splash {
position: absolute;
height: 100vh;
width: 100%;
top: 0;
left: 0;
background-image: url("http://www.musicmatters.ie/images/bara2.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.twitter-follow-button {
position: absolute;
top: 0px;
left: 0px;
vertical-align: top;
}
a.links1 {
position: relative;
display: inline-block;
float: left;
top: 258px;
width: auto;
padding-right: 20px;
color: white;
text-decoration: none;
font-weight: 900;
}
a.links {
position: absolute;
display: inline-block;
top: 320px;
float: left;
color: white;
text-decoration: none;
font-weight: 900;
}
<div id="splash">
<a href="twitter_handle" class="twitter-follow-button" data-show-count="false" data-dnt="true">
<img src="http://cdn.business2community.com/wp-content/uploads/2015/07/Twitter-icon.png.png" width="30px" height="30px">Follow twitter_handle
<a class="links" href="#">Home</a>
<a class="links1" href="#">Mailto</a>
<a class="links1" href="#">Other Link</a>
</a>
</div>
Try using a z index like so:
div.splash
{
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
z-index: -1;
}
Related
I have loading GIF with bellow code
<style>
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 100000000000;
background: url('Preloader_11.gif') center no-repeat #fff;
}
.se-pre-con::before {
content: 'Please Wait...';
z-index: 9999;
width: 30%;
height: 10%;
margin: 28% 35%;
position: absolute;
text-align: center;
font-size: 16px;
}
</style>
<div class="se-pre-con" id="loading" style="display: none;"></div>
Preview of above code
loading Prview
I want to change content of .se-pre-con::before for different ajax from jquery to display different massages for different processes
I'm working with a CSS Overlay for an image, trying to get text to display when the image is hovered. I have it working, but for some reason, the text is also all appearing as a blob above the gallery. I think it's to do with the position tag I'm using, but I'm not sure how to reproduce exactly. Code below + CSB:
https://codesandbox.io/s/eager-moore-qeki7
gallery
{
data.map((edge) => (
<div key={edge} className={styles.imgHov}>
<Img
fluid={edge.node.data.one}
className={styles.image}
/>
<div className={styles.overlay} key={edge}>
<p className={styles.text}>{edge.node.data.item_one}</p>
<p className={styles.text}>{edge.node.data.item_two}</p>
</div>
</div>
))
}
css
.imgHov:hover{
position: relative;
}
.image{
width: 25vw;
height: 25vw;
object-fit: cover;
}
.overlay{
position: absolute;
z-index: 999;
margin: 0 0;
left: 0;
right: 0;
top: 40%;
width: 60%;
background-color: pink;
height: 60%;
width: 25vw;
}
.overlay .text{
color: white;
font-family: Geomanist;
}
I translated your app in normal HTML, i think this should meet your requirements :)
.imgHov{
position: relative;
width: 25vw;
height: 25vw;
}
.image{
width: 100%;
height: 100%;
object-fit: cover;
}
.overlay{
display: none;
position: absolute;
z-index: 999;
margin: 0 0;
left: 0;
right: 0;
top: 40%;
width: 60%;
background-color: pink;
height: 60%;
width: 25vw;
}
.overlay .text{
color: white;
font-family: Geomanist;
}
.imgHov:hover .overlay {
display: block;
}
<div class="imgHov">
<img class="image" src="https://static.scientificamerican.com/sciam/cache/file/92E141F8-36E4-4331-BB2EE42AC8674DD3_source.jpg"/>
<div class="overlay">
<p class="text">item one</p>
<p class="text">item two</p>
</div>
</div>
I am making an expanding radial member with Javascript. There are image buttons on the menu which expands out of a center image which is clicked to expand the menu. My problem is that the button images are not clickable because the center button's image is covering them.
var i=0;
function expand(){
if(i==0){
document.getElementById("menu").style.transform="scale(3)";
document.getElementById("plus").style.transform="rotate(45deg)";
i=1;
}
else{ document.getElementById("menu").style.transform="scale(0)";
document.getElementById("plus").style.transform="rotate(0deg)";
i=0;
}
}
body{
background-color: #303358;
padding: 0px;
margin: 0px;
overflow: hidden;
}
.toggle {
background-color: #303358;
text-align: center;
height: 100px;
width: 100px;
border-radius: 50%;
position: absolute;
margin: auto;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.fa-plus{
height: 100%;
width:auto;
display: block;
transition: 0.7s;
}
.menu {
background-color: #000123;
height: 100px;
width: 100px;
transform: scale(0);
border-radius: 50%;
border-style: double;
border-color: #C8C8C8;
position: absolute;
margin: auto;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: -1;
transition: 0.7s;
}
a {
display: inline-block;
position: absolute;
font-size: 15px;
color: #C8C8C8;
}
a:nth-child(1){
top: 6px;
left: 45px;
}
a:nth-child(2){
top: 24px;
left: 77px;
}
a:nth-child(3){
top: 58px;
left: 76px;
}
a:nth-child(4){
top: 78px;
left: 42px;
}
a:nth-child(5){
top: 58px;
left: 10px;
}
a:nth-child(6){
top: 23px;
left: 12px;
}
a:hover {
color: #989898;
}
<div class="toggle" id="toggle" onclick="menu-expand()">
<img src="CTicon.png" id="plus" class="fa fa-plus">
</div>
<div class="menu" id="menu">
<a href="https://www.google.com/">
<img src="bepis.png" style="height:20%;" class="fa fa-private">
</a>
<a href="https://www.google.com/">
<img src="bepis.png" style="height:20%;" class="fa fa-public" >
</a>
<a href="https://www.google.com/">
<img src="bepis.png" style="height:20%;" class="fa fa-public2"></i>
</a>
<a href="https://www.google.com/">
<img src="bepis.png" style="height:20%;" class="fa fa-public3"></i>
</a>
<a href="https://www.google.com/">
<img src="bepis.png" style="height:20%;" class="fa fa-public4"></i>
</a>
<a href="https://www.google.com/">
<img src="bepis.png" style="height:20%;" class="fa fa-public5"></i>
</a>
</div>
The reason I've made a new question is because in most answers I found people suggest just adding a pointer-events: none; tag to my center expanding button, but I can't do this because it is also a button. To fix this I've tried using JS to change it, aswell as I have tried using pointer-events: none;. The only fix I have found so far is just changing the z-index of toggle, the issue with this is that the center button then my comes invisible when the menu expands because its placed below the menu itself which i would like to avoid.
Edit: Well now I'm more confused because the freakin thing works in the code snippet on here haha.
So once the code snippet worked on here I realized it must be something outside of the menu itself overlaying the buttons so I put the toggle button to z-index 2 and the menu to 1 and got it all working.
I'm having a strange issue over at a new site I just created (http://segarsmedia.com/motor-city-rising/). Problem is when you first visit it, you're greeted with a large play button and a poster image from the video I'm presenting coming from YouTube. Click it and a div goes over that spot, along with an close button. So far, so good.
However, if you click the close button and then try to play the video again, the video appears and starts to play, but it now appears underneath the poster image and play button and it's about 1/5 the original size. It seems to now be playing outside of its' intended container although when in inspector, the code doesn't seem to show that. It also doesn't seem to add any additional inline styles as well.
Obviously, I want the video to appear where it first appears when you click on the play button. So why is this occurring instead?
I have a Pen up at http://codepen.io/anon/pen/NdMqya and here's the code.
HTML
<div class="entry-content">
<div id="video-mask"></div>
<a class="vidjmp" id="show" href="#"><div class="play"><img src="http://segarsmedia.com/wp-content/themes/auth-story/img/play.png" alt="play" title="play"></div>
<img width="1920" height="1080" src="http://segarsmedia.com/wp-content/uploads/2017/01/hero-motor-city-rising.jpg" class="attachment-full size-full wp-post-image" alt="Motor City Rising" srcset="http://segarsmedia.com/wp-content/uploads/2017/01/hero-motor-city-rising.jpg 1920w, http://segarsmedia.com/wp-content/uploads/2017/01/hero-motor-city-rising-300x169.jpg 300w, http://segarsmedia.com/wp-content/uploads/2017/01/hero-motor-city-rising-768x432.jpg 768w, http://segarsmedia.com/wp-content/uploads/2017/01/hero-motor-city-rising-1024x576.jpg 1024w" sizes="(max-width: 1920px) 100vw, 1920px" /></a>
<div id="video-content" class="video-content">
<a id="video-close" href="#"><div id="close" class="close">X</div></a>
<div class="video-container">
<iframe id="video-iframe" width="" height="" src="http://www.youtube.com/embed/75pCxGDkuNQ" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div><!-- .entry-content -->
CSS
.entry-content:before,
.entry-content:after {
content: "";
display: table;
table-layout: fixed;
}
.entry-content:after, {
clear: both;
}
.entry-content {
position: relative;
display: block;
margin: 0;
width: 100%;
}
.play {
width: 125px;
height: 125px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -62.5px;
margin-top: -62.5px;
z-index: 205;
}
#video-content {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}
.video-container {
position: relative;
padding-bottom:56.25%;
padding-top: 0;
height: 0;
overflow: hidden;
width: 100%;
height: 100%;
}
.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#close {
background: #000;
color: #FFF;
display: block;
position: absolute;
top: 16px;
left: 24px;
height: 48px;
width: 48px;
border-radius: 24px;
z-index: 2000;
font-size: 24px;
line-height: 1;
font-weight: 700;
padding: 14px 16px;
border-radius: 24px;
z-index: 2000;
}
#media screen and (max-width: 677px) {
.play {
width: 62.5px;
height: 62.5px;
margin-left: -31.25px;
margin-top: -31.25px;
}
#close {
height: 30px;
border-radius: 15px;
font-size: 15px;
padding: 7px 10px;
width: 30px;
border-radius: 15px;
}
}
JS
<script type="text/javascript">
jQuery(document).ready(function() {
var iframeSrc = jQuery('#video-iframe').attr("src");
jQuery('a.vidjmp').click(function(e) {
e.preventDefault();
jQuery('#video-iframe').attr("src", iframeSrc + '?rel=0&autoplay=1&showinfo=0&modestbranding=0');
jQuery('#video-mask').fadeTo(500,0.9, function(){
jQuery('#video-content').fadeIn(500, function(){
jQuery('#video-iframe').show();
});
});
});
// Close Modal/Mask
jQuery('#video-close, #video-mask').click(function (e) {
e.preventDefault();
jQuery('#video-iframe').attr("src", iframeSrc);
jQuery('#video-mask, #video-content').fadeOut(0, function(){
var vidCopy = jQuery('#video-iframe').clone();
jQuery('#video-iframe').detach();
jQuery(vidCopy).appendTo('#video-content');
});
});
});
</script>
Found the problem. It was a simple case of CSS:
#video-iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
}
Above is with section tag and below is withoutI need to have the lightbox inside the section tag. Just not sure as to why this is happening or how to override this. The lightbox is appearing but it will not close and is behind the image. Here is the code:
<section id="XXX">
<div id="light" class="white_content">This is the lightbox content. Close</div>
<div id="fade" class="black_overlay"></div>
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<img src="Image.jpg" alt="Image" height="256" width="300">
</a>
</section>
Nothing In the CSS indicates that there's an issue there...
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
Thanks.
The console reads:
Uncaught TypeError: Cannot read property 'style' of null
Looking at your code
getElementById(' fade').
^^
Learn to use the developer console so you can find these typos.
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index: 1002;
overflow: auto;
}
<section id="XXX">
<div id="light" class="white_content">This is the lightbox content. Close
</div>
<div id="fade" class="black_overlay"></div>
<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<img src="Image.jpg" alt="Image" height="256" width="300">
</a>
</section>