How to add border to a image when its appeared? - php

Question

I have a button to choose an image and i have a space where i want to show a preview of that image. This space is just above of that button.
Now I want to add a dashed border on this image and border opacity should be 0.47. But the problem is I have already inserted image tag in my code and i'm just changing the <img src=""> dynamically using JS & that is why i can see the border even before choosing an image.
I want this kind of thing:
When image is there its perfectly fine, like this:
But image is not there its showing a small border just above the post button, like this:
Here is my HTML/PHP code :
<div>
<div id="post-image-content">
<div id="post-image-div">
<img id="blah" class="post-image" alt=" " width="100" height="100"/>
<img id="closes" class="close-button-image" src="<?php echo $this->webroot.'mainsite/img/img-close.png'?>" />
</div>
</div>
<a href="#">
<i class="fa fa-camera" aria-hidden="true" id="capture_image_01"></i>
</a>
<?php echo $this->Form->input('cover_image_url', array('type' => 'file','onchange' => 'document.getElementById(\'blah\').src = window.URL.createObjectURL(this.files[0])','style' => array("display:none"),'label' => false, 'div' => false));?>
</div>
And here is my CSS
.post-image {
margin-bottom: 10px;
margin-left: 10px;
border-radius: 4px;
opacity: 0.5;
border: 2px dashed rgba(20, 134, 171, 0.47);
padding: 3px;
}
#post-image-content {
display: block;
overflow: hidden;
}
#post-image-div {
position:relative;
z-index:0;
float: right;
margin: 2px 2px;
}
#post-image-div:hover .close-button-image {
position: absolute;
right: 6px;
top: 8px;
display: block !important;
z-index: 1;
height: 10px;
width: 10px;
}
.close-button-image {
position: absolute;
right: 6px;
top: 8px;
display: none;
z-index: 1;
height: 10px;
width: 10px;
}
Any help would be highly appreciated as i don't have any clue now.

Answer 1

You can add condition before image, if no default image or img tag not needed to shown
<?php if ($image): ?>
<img id="blah" class="post-image" alt=" " width="100" height="100"/>
<?php endif ?>
or add condition to that class only (apply required css)
<img id="blah" class="<?php echo $image ? 'post-image' : '' ?>" alt=" " width="100" height="100"/>

Answer 2

#post-image-div{
border: 2px dashed rgba(20, 134, 171, 0.47);
padding:2px;
border-radius:3px;
}
#post-image-div img,#post-image-div{
width:100px;
height:100px;
<div id="post-image-div">
<img id="closes" class="close-button-image" src="https://static.pexels.com/photos/33109/fall-autumn-red-season.jpg" />
</div>
try this code