Hello dear developers,
Iam having a problem by coding my Post grid. I want to blur the background image on hovering. But my text (in the same div is also blurring). Do you have a solution for this? Or isnt there an other way, without using this picture in a new div in the container. Want to keep it as background-image
The posts php:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="article" style="background-image: url(<?php echo the_post_thumbnail_url(); ?>);" onclick="self.location.href='<?php echo get_permalink( $leavename = false ); ?>'">
<div class="post_info">
<span class="post_cat"><?php the_category(' ') ?></span>
<h2 class="post_title"><?php the_title(); ?></h2>
<span class="post_date"><?php the_time('d.m.Y') ?></span>
</div>
<!-- .article --></div>
The css:
.article:hover {
-webkit-filter: blur(2px);
}
.article {
margin-top: 15px;
position: relative;
height: 229px;
margin-left: 15px;
margin-right: 15px;
float: left;
width: 25%;
cursor: pointer;
}
Thank you for helping me out, ExotiQ
You can't blur a background image, but you can blur any elements or pseudo-elements
I would go on and give a solution to your problem, but this one sums it up pretty good.
Check out this awnser
Hope that helps you out!
Related
I'm working in the custom-header.php file of my wordpress site and I'm trying to overlay a div containing a shortcode that produces a radio player (somewhat similar to this) on top of a div that contains an image. For some reason, despite using absolute and relative positioning and z-index, I can't seem to get it to lie on top of the image- it's consistently behind it. This is my code in custom-header.php:
<div id="headimg">
<div id="logo-image">
<img src="<?php header_image(); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php bloginfo( 'name' ); ?>" />
<div id="logo-player">
<?php echo do_shortcode('[radioforge id=1]') ?>
</div>
</div><!-- end of #logo -->
</div>
and my CSS:
#headimg #logo-image {
width: 100%;
overflow: hidden;
position: relative;
}
#headimg #logo-image img {
max-width: 100%;
height: auto;
border: none;
}
#headimg #logo-player {
position: absolute;
top: 50;
left: 50;
z-index: 10;
}
Not really sure why this isn't producing the desired result. I've tried giving #logo-image a negative z-index value as well, but that changes nothing. I know my radio player is appearing behind the image because I've set it to autoplay when the page loads and I can hear it, but for some reason I just cannot get it to sit on top. What am I doing wrong?
I’m trying to make an image gallery, the issues i am having with the following code is that
the images are not floating to the left because the images are different sizes. also when i click on the image to see the full size its very pig. is there a way to fix this, or maybe display half of the picture when in galley mode.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Image Gallery</title>
<link rel="stylesheet" href='css/gallery.css'>
</head>
<body>
<div class='container'>
<?php if($images):?>
<div class='gallery cf'>
<?php foreach($images as $image):?>
<div class='gallery-item'>
<img src="<?php echo $image['full'] ?>" >
</div>
<?php endforeach; ?>
</div>
<?php else: ?>
There are no images
<?php endif; ?>
</div>
</body>
</html>
.cf:before,
.cf:after{
content: " ";
display: table;
}
.cf:after{
clear:both;
}
.container{
max-width: 940px;
padding: 10px;
background: #f0f0f0;
margin: 0 auto;
}
.gallery{
width:100%;
}
.gallery-item{
float:left;
background: #fff;
width:19%;
margin:1%;
padding:2%;
padding-bottom: 5%;
box-shadow:1px 1px 3px rgba(0,0,0,.2);
}
.gallery-item img{
width:100%;
}
Instead of using <img> with different sizes in the thumb gallery, use a div with a fixe dimensions, so they will float perfectly, than set the image as a background-image and add background-size: cover; So the image will cover the div and the overflow will be hidden.
Here's the code using what Simon Arnold suggested:
<div class='container'>
<?php if($images):?>
<div class='gallery cf'>
<?php foreach($images as $image):?>
<a href="<?php echo $image['full'] ?>">
<div class='gallery-item' style="background:url(<?php echo $image['full'] ?>);">
</div><!-- .gallery-item -->
</a>
<?php endforeach; ?>
</div>
<!-- .gallery cf-->
<?php else: ?>There are no images
<?php endif; ?>
</div>
<!-- .container -->
CSS
.gallery-item {
width:number;
height:number;
background-size:cover;
}
I just build a Social media site and (2) things I do when A user uploads a pic
Resize image to multiple sizes for proper use / viewing (Try and keep a consistent height or width) Photoshop images to a specific height this way its consistent.
Use CSS to keep the image width an height from expanding out side the region.
CSS CHANGES:
.gallery-item img{
width:100%;
height:**MAKE THIS YOUR CONSTANT HEIGHT**;
}
It will stretch the image if its scale is off alot but you will have your answer or put it as a background in a div as listed below.
CSS CHANGES:
#Pic{
height: **MAKE THIS YOUR CONSTANT HEIGHT**;
}
<div id='Pic' style='background:url(picture.jpg)'></div>
Here is a preview (although image will stretch your layout and gallery will stay organized and clean.
I have this page here and the div .menu-content only reaches half the page even on 100% height. I really have no idea why.
Thanks!
<div class = "menu-content">
<div class="wrapper" style = "background-color:white; height:100%; width:750px;">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php else : ?>
<?php global $rd_data; if ($rd_data['rd_error_text']) { ?>
<?php echo $rd_data['rd_error_text']; ?>
<?php } else { ?>
Oops, It looks like an error has occured
<?php } ?>
<?php endif; ?>
</div>
You need to remove height:100%; on .menu-content .wrapper in your CSS code and in the inline style you set on it.
That way it will be set to default height:auto; and the height will be calculated by it's content.
Try this css..
.menu-content {
display: table;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top: 0;
position: relative;
}
Add html {height: 100%} and it should work.
to solve this you can simply add a div with style = "clear:both;" at the end of your div .menu-content
like this :
<div class="menu-content">
.....................
<div style="clear:both;"></div>
</div>
you have to use css this way. use the overflow:auto property and remove the unnecessary property like z-index and position from class .wrapper.
.menu-content {
background-color: #FFFFFF;
height: 100%;
overflow: auto;
}
.wrapper {
margin: 0 auto;
width: 750px;
}
The Problem
I am trying to place images within a responsive circle (div), which is itself the child of another responsive circle.
I feel I have the divs nailed, but as soon as I include an image the proportions get distorted and I can't figure out the correct CSS code.
The two divs are for a future border effect I am planning.
What I currently have...
CodePen
HTML
<section class="col-4">
<div class="wrapper">
<div class="outta-circle">
<div class="circle">
<!-- <img src="#"> -->
</div>
</div>
</div>
<div class="wrapper">
<div class="outta-circle">
<div class="circle">
<!-- <img src="#"> -->
</div>
</div>
</div>
</section>
CSS
.col-4 {
width: 1068px;
}
.wrapper {
width: 48.68%;
max-height: 520px;
background-color: white;
}
.outta-circle {
width: 100%;
height: auto;
margin: 80px auto;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background-color: red;
}
.circle {
width: 96.15%;
height: auto;
padding-bottom: 96.15%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background-color: blue;
overflow: hidden;
}
The solution to my issue is to use the CSS Background property for the class .circle (see comments, cheers for the help there!!).
I have a number of news stories each with their own image placed in a PHP array - I plan to use a database but for the time being an array will suffice - therefore the img src will change depending on which news story is loaded.
I was going to use:
<img src="<?php echo $article["img"]; ?>" alt="<?php echo $article["title"]; ?>">
Now I have to use the CSS Background property, how would I parse the PHP into the HTML/CSS??
I'm new to this, apologies if I haven't been clear...
First of all you can make your images a basic circle I said by following this tutorial
.circular {
width: 300px;
height: 300px;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: url(http://link-to-your/image.jpg) no-repeat;
}
But for your use, make a foreach loop in your PHP like this to be able to apply CSS directly to it (given the images in the array are stored like <img src="www.mysrc.com/kittens.jpg" />. If they are just the URL you have to change the echo line in the foreach loop a little)
<?php
$cont=0;
echo '<ul>';
foreach($array as $arrval){
echo '<li class="circular">'.$arrval.'</li>';
$cont++;
}
echo "</ul>";
?>
And then you can apply the CSS with
li.circular{
width: 300px;
height: 300px;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
}
Edit based on my chat with you. Set up the PHP this way first (has to be outside of <script> tags)
<?php
$array1 = array('img' => "http://izview.com/wordpress/wp-content/uploads/2008/07/the-chandelier.jpg",
'title' => 'article',
'content' => 'This is the content coming from PHP',
'date' => "6/27/2013");
?>
And call it by converting it to json and putting it in <script> tags to be applied to the element.
Javascript fix (no PHP) jsFiddle
var articleArray = [{img: "http://izview.com/wordpress/wp-content/uploads/2008/07/the-chandelier.jpg", title: "Article Name", content: "This is the content coming from PHP", date: "6/27/2013"},
{}
];
So if you're trying to achieve a sort of 3d effect on a rounded image you can definitely get it with just the image tag only so the code will be very clean and it will be easy to place the image through PHP.
Simply assign a 100% border-radius and a proper box-shadow to the image, something along these lines:
img {
border-radius: 100%;
box-shadow: 9px 0 red;
}
Take a look at this http://codepen.io/nobitagit/pen/trEuJ
As the code is this simple it will be very easy to make it responsive-friendly as to your needs.
#Zeaklous I have tried your method, but I believe in this instance I have to use CSS Background-Image: url();
Therefore I need a method of dynamically changing the Background-Image: url(); and after a little searching it seems following this technique using background-image:url('<?php echo $url ?>'); would work?!?
It's a stab in the dark though, my 1st time with code of this nature.
I have the following:
.home-thumbs h2 {
background: url("images/top-left-label.png") no-repeat scroll left top #CBCBCB;
font-size: 12px;
margin-left: -8px;
margin-top: -66px;
max-width: 268px;
padding-left: 12px;
position: absolute;
I only want to get that small png with a cut corner outside my div, but can't manage to do it. How should I do it, what am I missing here?!
The div is meant to be a "label" for a title over an image. I am having the same problem with a tooltip from a testimonial, I can't use the bottom part with the arrows and normal borders as, again, my img won't show outside the containing div.
Thanks.
P.S. HTML & PHP ..
<div id="home" class="home-thumbs">
<?php query_posts('cat=19&posts_per_page=1');
if(have_posts()) : while(have_posts()) : the_post(); ?>
<p class="cat-title"><?php echo single_cat_title();?></p> <?php the_post_thumbnail('medium'); ?>
<div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
<h2><?php the_title(); ?></h2>
<?php $cat_id = 19; $cat_link = get_category_link( $cat_id ); ?>
<?php the_excerpt(); ?>
More in this section
</div>
<?php endwhile; endif; wp_reset_query(); ?>
</div>
You have it positioned absolutely, so use top and left as you're supposed to
.home-thumbs h2 {
background: url("images/top-left-label.png") no-repeat scroll left top #CBCBCB;
font-size: 12px;
max-width: 268px;
padding-left: 12px;
position: absolute;
top: -66px;
left: -8px;
}
Try overflow:visible on the containing <div>.