javascript - How to put RGBA background above the image or div area? -


i need use rgba background above grid. used of jquery interect div area. don't know how put background-color in image while i'm using jquery. there way can using jquery ? or other methods ?

// grid function    $(function() {    $(".single_grid").hover(function() {      var panelid = $(this).attr("data-panelid");      $("#" + panelid).css({}).toggle();    })    $(".single_grid").mouseover(function() {      var imageid = $(this).attr("data-imageid");      $("#" + imageid).css({        opacity: "0.3"      })    })    $(".single_grid").mouseleave(function() {      var imageid = $(this).attr("data-imageid");      $("#" + imageid).css({        opacity: "1"      })    })  })
.grid_panel {    width: 100%;    height: auto;  }  #sub_grid_panel {    height: 760px;    margin: 0 auto;    width: 1125px;  }  #sub_grid_panel li {    float: left;  }  .single_grid {    width: 280px;    height: 200px;    overflow: hidden;    position: relative;    top: 0px;    left: 0px;  }  .image_hover_preview h3 {    text-align: center;    display: block;    margin-bottom: 5px;    font-weight: normal;    font-family: 'ralewaylight';    color: #ff8500;  }  .image_hover_preview {    position: absolute;    top: 65px;    width: 100%;    display: none;  }  div.image_hover_preview {    color: #333;    font-size: 20px;    padding: 5px 10px;    background: #ff8500;    color: #ffffff;  }  div.image_hover_preview {    text-align: center;  }
<li class="single_grid" data-panelid="panel1" data-imageid="image1">    <div class="grid_column_bar">      <img src="img/grid/grid1.jpg" alt="" id="image1">      <div class="image_hover_preview" id="panel1">        <h3>lorem ipsum dolor</h3>        <a href=""><i class="fa fa-search-plus"></i></a>        <a href=""><i class="fa fa-link"></i></a>      </div>    </div>  </li>  <li class="single_grid" data-panelid="panel2" data-imageid="image2">    <div class="grid_column_bar">      <img src="img/grid/grid2.jpg" alt="" id="image2">      <div class="image_hover_preview" id="panel2">        <h3>lorem ipsum dolor</h3>        <a href=""><i class="fa fa-search-plus"></i></a>        <a href=""><i class="fa fa-link"></i></a>      </div>    </div>  </li>

i used opacity in image

personally, i'm fan of little box-shadow: inset trick.

just add background , on top of that,
add box-shadow property :

.element {   background-image: url(mybgimage.jpg);   box-shadow: inset 0px 0px 0px 1000px rgba(51,51,51,0.3); }

note: spread-radius of 1000px arbitrarily chosen. make sure exceeds width/height of element.

box shadow generator


Comments

Post a Comment

Popular posts from this blog

Magento/PHP - Get phones on all members in a customer group -

i working on custom magento extension. working around adminhtml part , i've created custom form there. here form code: <?php class vivasindustries_smsnotification_block_adminhtml_sms_sendmass_edit_form extends mage_adminhtml_block_widget_form { public function _preparelayout() { $extensionpath = mage::getmoduledir('js', 'vivasindustries_smsnotification'); $head = $this->getlayout()->getblock('head'); $head->addjs('jquery.js'); $head->addjs('vivas.js'); return parent::_preparelayout(); } protected function _prepareform() { $form = new varien_data_form(array( 'id' => 'edit_form', 'action' => $this->geturl('*/*/save', array('id' => $this->getrequest()->get...
Read more

php - Bypass Geo Redirect for specific directories -

i'm trying bypass redirect specific url within site. wondering if might able help. the code below code use, original urls replaces example.com i'd able access http://example.com/admin without redirect occuring. is there way this, , there way using own ip? function country_geo_redirect() { $country = getenv('http_geoip_country_code'); if ($country == "us" ) { wp_redirect("http://usa.example.com/"); exit; } else if ($country == "gb" ) { wp_redirect("http://uk.example.com/"); exit; } } add_action('init', 'country_geo_redirect'); you can bypass redirection code if server found ip address. if ip address == <my ip address> ' nothing here else country_georedirect() end if
Read more

php - .htaccess mod_rewrite for dynamic url which has domain names -

i want convert url ex:( example.com/link.php?url=facebook.com ) ( example.com/facebook.com.php ) how can using .htaccess. or there other process make job easier ? i tried adding script .htaccess file options +followsymlinks rewriteengine on rewriterule url-(.*)\.htm$ link.php?url=$1 but converting url adding "url-" ( example.com/url-facebook.com.php ) i want remove "url-" , want make ( example.com/facebook.com.php ) rewriteengine on rewritecond %{the_request} ^get.*link\.php\?url\= [nc] rewritecond %{request_uri} !/system/.* [nc] rewriterule (.*?)link\.php\?url\=/*(.*) /$1$2 [r=301,ne,l] not sure how above work edit of used use remove index.php url
Read more