how to achieve this effect with css html?


Tags: html,css,image

Problem :

Could any of you guys tell me how to achieve this image effect with the image being displayed slightly out of its div(in green)??

I am not sure what is this effect called therefore I was unable to use google to search for this.

how do I make this image slightly out of it's box?? here's the link to the image image effect

    <!doctype html>
    <html>
    <head>
<title>practice site 2</title>
<meta name="viewport" content="width=device-width, initial-scale=1">    

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- Fontawesome library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link rel="stylesheet" type="text/css" href="practice2.css">

</head>
<body>
    <div class="container">

<div class="first">
<p>CONVERSIFIC</p>
<p><span class="span1">The 1st</span><br>Business Intelligence Platform<br><span class="span2">for Shopify</span></p>
<p>We show you how to grow your revenue<br><span class="span3">-all you have to do is take action</span></p>

<form>
<input type="text" placeholder="enter your email" name="email">
<input type="submit" name="submit"  value="Add me to Beta">
    </form>
    <p>Join our beta today,be the first to get access to Conversific</p>

</div><!--first div ends -->

<div class="use">
<h1>Why use Conversicif?</h1>
<hr class="firsth">

<div class="box row">
    <div class="col-lg-6">
        <img class="img-responsive" src="graph.jpg" alt="graph">
    </div>
    <div class="col-lg-6">
    <p><strong>Conversific helps you make intelligent decisions to grow your business</strong></p>  
    <p>There are plentfy of platforms that make it easy to capture data and analytics about your ecommerce site.But when it comes to understanding the data you've captured, it's not always clear what's important and where to make changes.</p>
    </div>

</div><!--box div ends -->
<div class="positions">
<h1>How does Conversific work?</h1>
<p>Say goodbye to gathering reports and analyzing data and head straight to decision making </p>
<hr class="second">
<div class="threebox row">
<div class="col-lg-4"><p>Conversific is installed onto your ecommerce store with just one click from your shopify store</p></div>
<div class="col-lg-4"><p>After the installation you just need to install google analytics</p></div>
<div class="col-lg-4"><p>Immediately after you have signed in you see a comprehensive reports overview</p></div>


</div><!--threebox row ends -->
</div><!-- positions div ends-->
</div><!--use div ends -->




<div class="features">
<h1> Features you'll love</h1>
<p>These are the features you are going to love no matter what<br>
    So, is this the end of the paragraph or what or are you gonna keep<br>
    typing till your fingers bleed??</p>

<div class="row">
    <div class="col-lg-6">
<p>ECOMMERCE FOCUS<br><span class="spanf">Decision Focused Dashboards To<br> Supercharge Your Ecommerce Business</span><br>
There are plenty of platforms that make it easy to capture data and analytics about your ecommerce site. But when it comes to understanding the data you've captured. It's not always clear what's important and where to make changes.<br>
    <button>Join Now</button></p>
    </div>
    <div class="col-lg-6">

    </div>

</div><!-- row ends -->

<div class="row">
    <div class="col-lg-6"></div>
    <div class="col-lg-6"><p>EASY TO UNDERSTAND<br><span class="spanf">Optimize Your Product & Category<br> Performance</span><br>
There are plenty of platforms that make it easy to capture data and analytics about your ecommerce site. But when it comes to understanding the data you've captured. It's not always clear what's important and where to make changes.<br>
    <button>Join Now</button></p></div>

</div><!-- row ends -->

<div class="row">
    <div class="col-lg-6"><p>INCREASE REVENUE<br><span class="spanf">Turbo Boost Your marketing and Find<br> Top Performing Marketing Channels</span><br>
See which marketing channels are the most effective for your business<br>and maximize your return on investment<br>
    <button>Join Now</button></p></div>
    <div class="col-lg-6"></div>

</div><!-- row ends -->

<div class="row">
    <div class="col-lg-6"></div>
    <div class="col-lg-6"><p>ECOMMERCE FOCUS<br><span class="spanf">Decision Focused Dashboards To<br> Supercharge Your Ecommerce Business</span><br>
There are plenty of platforms that make it easy to capture data and analytics about your ecommerce site. But when it comes to understanding the data you've captured. It's not always clear what's important and where to make changes.<br>
    <button>Join Now</button></p></div>

</div><!-- row ends -->

</div><!-- features div ends -->
<div class="pillars"></div>
<div class="team"></div>
<div class="end"></div>

</div><!-- container div ends -->




</body>

</html>


Solution :

enter image description hereits quite easy ! here the tricks . on hover it will slightly out of it's box as picture shows

body {
    background-color: lightblue;
}
#box{
width:100px;
height:100px;
background:red;
margin-top:-100px;
}
#box:hover{

      margin-left:10px;
      margin-top:-110px;
}


</style>
</head>
<body>
<div style="background:black;width:100px;height:100px;"></div>
<div id="box"></div>


</body>

    CSS Howto..

    How to prevent the CSS `:before` text being editable while the `div` itself is editable?

    Example of how to load static CSS files from node_modules using webpack?

    How do I make a text input non-editable?

    How to change the scrolling text in CSS or JQuery

    How to modify divs in grid template site?

    How to force a list to be vertical using html css

    How to use Sass mixin transition for applying transition-delay only?

    CSS how to get a div to the right side and a div exactly in the middle?

    show hidden div below current row of divs in responsive layout with jquery

    Ruby on Rails: (Beginner) How can I make my style sheet (in public/stylesheet folder) be used by my layouts?

    How to make both text and image change on rollover via CSS?

    How to adjust the size of background image with browsers window using media queries

    How would I get an img element to render under a background-image in CSS

    How to implement the button css like Spotify play button in the table row

    How to ignore white spaces in between tags, CSS, PHP

    Jquery: How to check if the element has certain css class/style

    How to select element by order ? - Css

    How to reverse z-index on stacked divs

    How to make CSS color transition time correctly with transform perspective?

    How to link a HTML page to a CSS file when the CSS file is in an upper directory?

    How to make a rectangle mask with css

    IE10 has extra margin above an inline header. How do I remove it?

    How to create this type of element using XHTML & CSS?

    How can I override the CSS ul menu for the JavaScript autocomplete?

    How to load multiple CSS files within a JS script

    CSS How to attach input box to bottom of divider window

    How to add numbered list style in div tag

    when a div is showing do some thing for me and when its hidden stop that , with jquery its possible?

    How Do I Make Li Clickable for Radio Button Inside

    How to add css for div tag and Panel in asp